jquery file upload with ajax

Question

            <div class="form-group">
                <label class="form-control-label">
                    {{ __('Not Dosyası') }} : <span class="m--font-danger">*</span>
                </label>
                <br />
                <button type="button" onclick="$('#new--file').trigger('click');" class="btn m-btn m-btn--gradient-from-primary m-btn--gradient-to-info">{{ __('Not Dosyasını Yükle') }}</button>
            </div>
            <form id="new--form_file" enctype="multipart/form-data">
                <input class="m--hide" type="file" name="file" id="new--file" />
            </form><!-- group image form -->

jquery:

$(function() {
    $("#new--file").on('change', (function(e) {
        LessonNote.new.readURL(this);
    }));
});

readURL method:

    readURL: function(input) {
        var file = input.files[0];
        var fileType = file.type;
        var fileSize = file.size;
        var match = ["application/pdf"];
        var maxSize = 20971520; // 20MB

        if (fileSize > maxSize) {
            swal(LANGCONVERT.error + '!', LANGCONVERT.file_maximum_size_20, "error");
        } else if (!((fileType === match[0]))) {
            swal(LANGCONVERT.error + '!', LANGCONVERT.file_supported_types_pdf, "error");
        } else {
            $.ajax({
                url: api.main + api.file_upload,
                type: 'post',
                data: file,
                success:function(data){
                    console.log(data);
                },
                cache: false,
                contentType: false,
                processData: false
            });
        }
    }

Laravel side:

public function store(Request $request) {
    $rules = [
        'file' => 'required|max:10000|mimes:pdf,jp2,jpeg,jpg,png,bmp,tiff,tif,mirax'
    ];

    $this->validate($request, $rules);

    $data = $request->all();
    $data["file"] = $request->file->store('');

    return $this->showMessage($data, 201);
}

Return error:

http://localhost:8181/api/file_upload 422 (Unprocessable Entity)

It means file field is required.

I try to with POSTMAN, it works great. How can i send file with name as a file ?

You are giving the file straight to the data option. It needs to be a FormData element. https://stackoverflow.com/questions/6211145/upload-file-with-ajax-xmlhttprequest — Taplar, Jun 28 '18 at 22:39
Since it's already mentioned in another question, it's applicable to be closed as a duplicate, rather than answered. — Taplar, Jun 28 '18 at 22:42

score 2 · Accepted Answer · answered Jun 28 '18 at 22:50

2

You are doing it wrong here

var file = input.files[0];
...
$.ajax({
    ...
    data: file,
    ...
...

Instead, you need to send using FormData()

var file = input.files[0];
var formData = new FormData();
formData.append("file", file);

...
// and in $.ajax({
$.ajax({
    ...
     data: formData,
    ...
...

Hope, this is clear, you can look out other basic example here - Ajax Upload image

I have snipped your other code with ... to point your mistake on a exact code.

answered Jun 28 '18 at 22:50

KroKite

66
7

This is already referenced in the duplicate question linked to this question. Rather than answering a duplicate question, vote to close it. – Taplar Jun 28 '18 at 22:55
Since, I do not have sufficient reputation in SO, I am not getting an option to flag for duplicate here. – KroKite Jun 28 '18 at 22:58

jquery file upload with ajax

1 Answers1