Transmitting data via AJAX to a sails endpoint

Question

Transmitting data via AJAX to a sails endpoint

Currently, I am facing an issue with a client-side component that generates a DataURL when a user uploads or takes a picture and then crops it. My goal is to send this DataURL via an AJAX call to a sails endpoint. As per the documentation provided by Sails, the endpoint will read the files using the following code:

req.file('file_name');

I am unsure about how to convert the DataURI into a format suitable for an AJAX call so that the endpoint can properly read the file from req.file. It would be helpful to see an example of setting up the call in any JavaScript or framework library to guide me through the implementation process.

Your assistance on this matter would be greatly appreciated.

javascript ajax sails.js

Answer 1

Answer №1

When working on the client-side, you will need to convert the DataURL into form data before sending it to the route in your controller. There are helpful examples available here and here.

The endpoint for this process should look something like the following:


var uploadHandler = function(req, res) {
    req.file('avatar').upload({
        maxBytes: 4000000, // limit upload size to ~4MB
        dirname: '/tmp' // temporary directory
    }, function whenDone(error, uploadedFiles) {
        if (error) {
            if (error.code === 'E_EXCEEDS_UPLOAD_LIMIT') {
                return res.badRequest({ msg: error.message });
            }
            return res.serverError(error);
        }

        if (_.isEmpty(uploadedFiles)) {
            res.badRequest({ msg: "No file was uploaded." });
            return;
        }

        var filePath = uploadedFiles[0].fd;
        var fileType = uploadedFiles[0].type;

        if (!_.includes(['image/jpeg', 'image/png', 'image/gif'], fileType)) {
            res.badRequest({ msg: "Invalid file type." });
            return;
        }

        // Proceed with necessary actions...

    });
};

Answer 2

When working on the client-side, you will need to convert the DataURL into form data before sending it to the route in your controller. There are helpful examples available here and here.

The endpoint for this process should look something like the following:


var uploadHandler = function(req, res) {
    req.file('avatar').upload({
        maxBytes: 4000000, // limit upload size to ~4MB
        dirname: '/tmp' // temporary directory
    }, function whenDone(error, uploadedFiles) {
        if (error) {
            if (error.code === 'E_EXCEEDS_UPLOAD_LIMIT') {
                return res.badRequest({ msg: error.message });
            }
            return res.serverError(error);
        }

        if (_.isEmpty(uploadedFiles)) {
            res.badRequest({ msg: "No file was uploaded." });
            return;
        }

        var filePath = uploadedFiles[0].fd;
        var fileType = uploadedFiles[0].type;

        if (!_.includes(['image/jpeg', 'image/png', 'image/gif'], fileType)) {
            res.badRequest({ msg: "Invalid file type." });
            return;
        }

        // Proceed with necessary actions...

    });
};

Transmitting data via AJAX to a sails endpoint

Answer №1

Similar questions

Setting a background image in vanilla-extract/css is a straightforward process that can instantly enhance

Change the color of the Material UI InputLabel

Exploring the Mechanism Behind the Successful String Interpolation of a Variable Imported in my Angular 2 Application

Error in calculation of $.post function in JQuery

Is there a way to determine the origin of a request using PHP?

How far is the Google Maps Marker Distance?

Contrasting onevent with addEventListener

What is preventing me from displaying the results on the webpage?

How can you make the coordinates of the cursor track the cursor when it hovers over a rectangle?

Steps to create a dynamic <div> that is only visible within a parent <div>

Utilizing JavaScript libraries in a TypeScript project: A step-by-step guide

Sorting through JSON information using JQUERY

Utilizing CodeIgniter Controller for Handling JSON Requests via AJAX

What is the best method for transferring data from the first table to the second table in Angular?

Modify the name format using an AngularJS directive

Why won't my Chrome content script load even though I have the correct syntax and have tried troubleshooting?

Can you combine multiple items in PaperJS to move them collectively?

What is the best way to pass the value of a selected option to an express server

In order for the AngularJS SPA to detect the JWT token stored in local storage, it must be re

The title of the homepage is showing up behind the AppBar. Any suggestions on how to correct this?