How to upload a file from frontend using query string

Question

I have one form with some fields in AngularJs. I want to add one more field in form to upload a file, Currently I am sending data to backend as json payload, how can I upload a file that's my question, I have one idea that is by using query string... Anyone can please let me know how can I do this thing. My code to upload text fields -

    let settings = {
      "url": "https://someurl",
      "method": "POST",
      "timeout": 0,
      "headers": {
        "Content-Type": "application/json",
      },
      "data": JSON.stringify(data)
    };
    
    $.ajax(settings).done(function (response) {
        toastr["success"]("Form submitted succesfully.", "Success!");
        setTimeout(function () {
          window.location.href = "success.php";
        }, 1500);
      }).fail(function (err) {
          toastr["error"]("Cannot submit your form.", "Failed!");
      }
   };

I am using AngularJs for the frontend.

Reporter · Accepted Answer · 2021-09-14 09:23:24Z

1

Two ways:

1 - Use Json: You can convert file to base64 and push to server like simple JSON Image convert to Base64

2 - Use FormData: change content type to: 'multipart/form-data' and use formData in body like this How to use FormData for AJAX file upload?

edited Sep 14, 2021 at 9:23

Reporter

3,9345 gold badges36 silver badges50 bronze badges

answered Sep 14, 2021 at 9:19

Andy

812 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wisely D Cruizer · Accepted Answer · 2021-09-14 10:11:34Z

1

Try this :

 <form name="myForm" ng-submit="_post(file,data)">
     <input ng-model='file' type="file"/>
     <input ng-model='data.name' type="text"/>
     <input ng-model='data.age' type="number"/>
     <input type="submit" value='Submit'/>
 </form>


 var _post = function (file, jsonData) {
        $http({
            url: your url,
            method: "POST",
            headers: { 'Content-Type': undefined },
            transformRequest: function (data) {
                var formData = new FormData();
                formData.append("model", angular.toJson(data.model));
                formData.append("file", data.files);
                return formData;
            },
            data: { model: jsonData, files: file }
        }).then(function (response) {
            ;
        });

Working fiddle

edited Sep 14, 2021 at 10:11

answered Sep 14, 2021 at 9:26

Wisely D Cruizer

1,18412 silver badges27 bronze badges

4 Comments

Reporter Over a year ago

Any explainations?

Amara Over a year ago

what is the use of "formData.append("model", angular.toJson(data.model));" this line ?

Wisely D Cruizer Over a year ago

@Amara. This is used to send data to your server in form data format. This is how files are sent to server usually.

Wisely D Cruizer Over a year ago

@Amara. I've added a working fiddle for you. jsfiddle.net/2jLnv1qa

Collectives™ on Stack Overflow

How to upload a file from frontend using query string

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related