How to send the <input type="file"> data from AJAX by putting it in object?

Question

I have a simple upload file in my html like so:

<div class="col-md-12">
    <span id="fileUploadErr">Please Upload A File!</span>
    <div  style="margin-bottom: 10px;"></div>
    <input id="pickUpFileAttachment" type="file" name="attachFileObj" size="60" />
</div>

When I click on the "Submit" button the following action occurs:

$("form").submit(function() {
    event.preventDefault();

    var assignmentObj1 = {

        selectionId: trDataSecondTable.selectionId,
        inout: "in",
        letterReceivedBy: $("#letterReceivedBy").val(),
        letterIssuedSubBy: $("#letterIssuedSubBy").val(),
        representativeNameEng: $("#representativeNameEng").val(),

        letterId: 2,
        assessmentNo: 0
        imageFile: $("#representativeNameEng").val()
        imageTitle:
    }

    console.log(jsonData);
    $.ajax({

        url: A_PAGE_CONTEXT_PATH + "/form/api/saveProcessAnexTwo",
        method: "post",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify(assignmentObj1),
        success: function(response) {

        },
        error: function(response) {
            switch (response.status) {
                case 409:
                    alert("error");
            }
        }
    });
});

I need to assign the fileName and the uploaded file while sending from AJAX and need to put it inside the assignmentObj1 variable so I tried: imageFile: $("#representativeNameEng").val() to get the file information but it is not coming. How can I get the file information and send from AJAX by putting it in a local variable? And also how can I get the name of the file which can be placed in the imageTitle: property?

This may it be helpful: stackoverflow.com/questions/5941393/… — I_Al-thamary
– I_Al-thamary, Commented Dec 4, 2018 at 7:00
most likely you will need to base64 encode the file to pass it to the object — madalinivascu
– madalinivascu, Commented Dec 4, 2018 at 7:00
You left the imageTitle property empty intentionally, in your code example, I assume? — ProgrammerPer
– ProgrammerPer, Commented Dec 4, 2018 at 7:53
You can find many ways to do it. Look these answors:stackoverflow.com/questions/17657184/… — I_Al-thamary
– I_Al-thamary, Commented Dec 4, 2018 at 7:54

I_Al-thamary · Accepted Answer · 2018-12-04 08:05:04Z

1

This is how to deal with the file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery Ajax File Upload</title>
</head>
<body>

<div class="col-md-12">
   <span id="fileUploadErr">Please Upload A File!</span>
   <div  style="margin-bottom: 10px;"></div>
   <input id="pickUpFileAttachment" type="file" name="pickUpFileAttachment" size="60" />
</div>
    
    <div class="result"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
   
   //  $("form").submit(function(){
    
        $('#pickUpFileAttachment').change(function(e){
          var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]); 
           
         
            $.ajax({
                url : window.location.pathname + "/form/api/saveProcessAnexTwo",
             data: formData,
    type: 'POST',
    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
    processData: false, 
                success: function(response){
                 alert("suc");
                    $('.result').html(response.html)
                    
                } , error: function(response){
                        switch(response.status){
                            case 409:
                            alert("error");
                        }}
            });
        });
        //});
    });
    </script>
</body>
</html>

edited Dec 4, 2018 at 8:05

answered Dec 4, 2018 at 7:47

I_Al-thamary

4,1883 gold badges29 silver badges47 bronze badges

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

7 Comments

ashwin karki Over a year ago

can't i assign formData to imageFile: inside of that variable?

I_Al-thamary Over a year ago

@ashwinkarki you need to convert the Image to Base64 String and then to JSON Object.stackoverflow.com/questions/41357655/… stackoverflow.com/questions/14220321/…

ashwin karki Over a year ago

how is that function getBase64(file) called? can u please add the converting the code into base64 please?

I_Al-thamary Over a year ago

@ashwinkarki look at this example:stackoverflow.com/questions/34779799/…

I_Al-thamary Over a year ago

@ashwinkarki this the code maybe will help you to undrstand :ourcodeworld.com/articles/read/322/…

|

kshitij · Accepted Answer · 2018-12-04 07:02:59Z

1

Easiest method is to use formData to send data:

var data = new FormData();
$.each($('#filecontainer')[0].files, function(i, file) {
   data.append('file-'+i, file);
});

So now you have formData object

$.ajax({
   url: 'php/upload.php',
   data: data,
   cache: false,
   contentType: false,
   processData: false,
   method: 'POST',
   type: 'POST', // For jQuery < 1.9
   success: function(data){
      alert(data);
   }
});

Hope this helps.

answered Dec 4, 2018 at 7:02

kshitij

7209 silver badges18 bronze badges

5 Comments

ashwin karki Over a year ago

i need to assign imageFile: and imageTitle separately and need to send through ajax hoe can i get this ? in imageFile the file needed to come there and in imageTitle name of the image?

Nirali Over a year ago

@ashwinkarki you can get imageFile title in you php file from file object. no need to pass from ajax

ashwin karki Over a year ago

i am using java

Nirali Over a year ago

@ashwinkarki you can get from java also

ashwin karki Over a year ago

can u please illustrate me more @niral

Collectives™ on Stack Overflow

How to send the <input type="file"> data from AJAX by putting it in object?

2 Answers 2

7 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related