0

I want to use rails active storage to save files but I also want to send json and somehow have images sent along to be processed and matched up to the main "form" data.

I have active storage all set up and ready to process images and save them into a separate active storage database that gets joined with the database that I am submitting my json data to. The big disconnect is me figuring out how I can "link" the files that I need to submit and make sure they match up with the json data I am submitting to the other database.

Here is the simple code I am using to submit json data to the rails database. This works perfectly and it submits all the text inputs into the database. 

const updateMatchedResults = () => {
return 
fetch("http://localhost:3000/collections/"+match.id, {
             method: 'POST',
             headers: new Headers({
               'X-CSRF-TOKEN': csrf,
               'Content-Type': 'application/json'
             }),
             body: JSON.stringify(match)
           })
           .then(response => console.log(response))
 }

I am using vuejs so I have a method that detects when someone has added a file. That looks like this:

uploadFile(e) {
  console.dir(e.target.files[0]);
}

When someone uploads or changes a file in the file input, it kicks off this javascript and I can see the file details logged in the console. I know that from here I can submit a request to rails to save the file, but it won't have the proper association as it's not being submitted in a form with the rest of the text data.

I expect to be able to upload the files to the active storage database with the proper association to the json data base I am submitting all the text to.

bjrdesign
  • 142
  • 13
  • Why are you not submitting them with the form? – engineersmnky Jul 18 '19 at 14:24
  • Because I have a complicated nested json array that I am working from and not just a simple form. There is a loop that runs through the rather complex nested json and flattens it out so that I can save it properly. – bjrdesign Jul 18 '19 at 14:28
  • Check [this](https://stackoverflow.com/questions/35192841/fetch-post-with-multipart-form-data) out. You should be using [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) to submit a multi-part form with the raw JSON & the files in one request. – BigRon Jul 18 '19 at 14:42

0 Answers0