uploading file in reactjs using jquery

Question

I'm trying to upload a file to one of my localhost folders using reactjs and jquery, when i submit a file it works fine with no errors but when i go to the folder to check i find nothing there (nothing in my folder)

uploadFile()
    {
      var data = new FormData();    
      data.append('file', this.refs.file.getDOMNode().files[0]);
        $.ajax({
            url: 'http://localhost:8080/files/uploads',
            data: data,
            processData: false,
            contentType: false,
            type: 'POST',
            cache: false,
            success: function(data){
                alert("File uploaded");     
            },
            error: function()
            {             
              alert("Error . . .");
            }
        });
    }




render: function()
    {

        return(  <form style={{width:100+'%'}} encType="multipart/form-data">
                    <div className="col-sm-12 padding-left-0 padding-right-0">
                        <input ref="file" type="file" name="file" id="filer_input2"> </input>
                        <input type="button" value ="submit" onClick={this.uploadFile}/>
                    </div>
                </form>);
    }

any idea about this issue please ?

Where is the server code which does the upload? – Mukesh Soni Jun 24 '17 at 13:49 — Mukesh Soni, Jun 24 '17 at 13:49
You don't jquery. Try `fetch`. – 0xcaff Jun 24 '17 at 15:35 — 0xcaff, Jun 24 '17 at 15:35
Ok guys, many thanks . – Amine Mahamat Amine Jun 24 '17 at 18:56 — Amine Mahamat Amine, Jun 24 '17 at 18:56

score 0 · Accepted Answer · answered Jun 24 '17 at 14:52

0

You need to use here redux-thunk for this kind of asynchronous operations.

Here you can see a full example on how to create an ajax request using react and jquery

answered Jun 24 '17 at 14:52

Tal Avissar

10,088
6
45
70

uploading file in reactjs using jquery

1 Answers1