Send the JSON file to the server by uploading it

Question

Send the JSON file to the server by uploading it

Situation

Currently, I'm dealing with a page comprising questions structured as shown below:

sections:[{
    section: 1,
    questions:[{
        question: 1,
        attachment: [FormData Object]
        ...
    },
    {
        question: 2,
        attachment: [FormData Object]
        ...
    }]
}, ...]

Each question is associated with an attachment. To handle this, I've utilized a FormData object to upload the file and link it with the question object. For instance:

let formData = new FormData();
formData.append('file', event.target.files[0])
question.attachment = formData

Everything seems to be in order at this stage. However, issues arise when attempting to send this data to the server. When utilizing the following code for sending it:

this.$http.post('my-path', {data: this.sections}, {headers: {'Content-Type': 'multipart/form-data'}, emulateJSON: true})

Despite using emulateJSON: true, the request is successful but the attachment attribute is not included in the request.

Moreover, specifying

headers: {'Content-Type': 'multipart/form-data'}

results in sending a null request for unknown reasons.

Is there a viable solution to effectively accomplish this task?

javascript laravel vue.js

Answer 1

Answer №1

The issue seems to lie in the serialization of the form object.

My recommendation is to encode each file in base64 and add it instead of using the form data object.

Another option is to send the form data as part of a JSON payload. Make sure to research the proper method for serializing form data.

Based on my experience, encoding files in base64 has been the more effective approach.

Answer 2

The issue seems to lie in the serialization of the form object.

My recommendation is to encode each file in base64 and add it instead of using the form data object.

Another option is to send the form data as part of a JSON payload. Make sure to research the proper method for serializing form data.

Based on my experience, encoding files in base64 has been the more effective approach.

Answer 3

Answer №2

Remember to disable processData for this request.

this.$http.post('my-path', {
    cache: false,
    processData: false,
    data: this.sections,
}, 
{
    headers: {
        'Content-Type': 'multipart/form-data'
    }, 
    emulateJSON: true
};)

Answer 4

Remember to disable processData for this request.

this.$http.post('my-path', {
    cache: false,
    processData: false,
    data: this.sections,
}, 
{
    headers: {
        'Content-Type': 'multipart/form-data'
    }, 
    emulateJSON: true
};)

Answer 5

Answer №3

According to @eWizard's suggestion. Is it possible to utilize the guidance on How to turn a file into base64 in JavaScript??

I encountered an issue with this method, but I managed to resolve it using async and await.

Subsequently, he can revert the conversion on the server side.

Modify the function to resemble the snippet below:

   getBase64: function(file){
        var reader = new FileReader();
        return new Promise((resolve, reject) => {
            reader.onerror = () => {
                reader.abort();
                reject(new DOMException("Problem parsing input file."));
            };
            reader.onload = () => {
                resolve(reader.result);
            };
            reader.readAsDataURL(file);
        });
    }

Then implement it as shown below:

  var fileReaderPromise = await this.getBase64(image);

Answer 6

According to @eWizard's suggestion. Is it possible to utilize the guidance on How to turn a file into base64 in JavaScript??

I encountered an issue with this method, but I managed to resolve it using async and await.

Subsequently, he can revert the conversion on the server side.

Modify the function to resemble the snippet below:

   getBase64: function(file){
        var reader = new FileReader();
        return new Promise((resolve, reject) => {
            reader.onerror = () => {
                reader.abort();
                reject(new DOMException("Problem parsing input file."));
            };
            reader.onload = () => {
                resolve(reader.result);
            };
            reader.readAsDataURL(file);
        });
    }

Then implement it as shown below:

  var fileReaderPromise = await this.getBase64(image);

Send the JSON file to the server by uploading it

Answer №1

Answer №2

Answer №3

Similar questions

Can data be presented in AngularJS without the use of scope variables?

Vue 3 presently does not support dynamically requiring "highcharts"

Finding the index of a nested div element with a click event using jQuery

Managing nested levels in Vue Draggable

What is the best way to keep my data within a global variable?

Discovering the managed metadata fields on a site page using REST API in SPFx Vue.js

How do I transfer a PDF received from a third-party to my client using a REST API on the backend?

Issue with Web Worker functionality in SvelteKit on Firefox version 106.0.5

Accessing QML Functions from JavaScript

Exploring GridJS Customization in VueJS

Utilizing Salesforce and DocuSign: A guide to automatically filling in the recipient of my envelope through DocuSign with the contacts from my records

Issues arise when JQuery functions fail to execute

Omit certain table columns when exporting to Excel using JavaScript

Custom web addresses for files in the Vue 2.1 framework

Rendering Koa without the need for a template engine

Once invoked by an ajax request, the $().ready function is executed

Transforming a Nestjs string object into JSON data

JavaScript: Finding the current month and all subsequent months until the end of the year

Media publications do not conform to the current trends

Navigate to a specific section on a different page while excluding a distance of X