cubiclesoft / jquery-fancyfileuploader

A jQuery plugin to convert the HTML file input type into a fancy file uploader under a MIT or LGPL license. Mobile-friendly too!
59 stars 27 forks source link

How to Pass CSRF token through input Data? #13

Closed takielias closed 4 years ago

takielias commented 4 years ago

How to Pass CSRF token through input Data?

cubiclesoft commented 4 years ago

Have you tried using params?

takielias commented 4 years ago

Have you tried using params?


        $(function () {
            $('#thefiles').FancyFileUpload({
                url: "{{base_url('update-doctor-profile-image')}}",
                retries: 1,
                params: {
                    csrf_token: $("input[name=csrf-token]").val()
                },
                maxfilesize: 1000000,
                added: function (e, data) {
                    // It is okay to simulate clicking the start upload button.
                    this.find('.ff_fileupload_actions button.ff_fileupload_start_upload').click();
                },
                uploadcompleted: function (e, data) {
                    $.ajax({
                        'async': true,
                        'type': "GET",
                        'dataType': 'json',
                        'url': "{{base_url('get-csrf')}}",
                        'success': function (data) {
                            $("input[name=csrf-token]").val(data.csrf_token);
                        }
                    });
                }
            });
        });
</script>

Can you please check it? Is there anything wrong? I got empty string of csrf_token.
cubiclesoft commented 4 years ago

I'd guess that your input field is empty at the moment that $("input[name=csrf-token]").val() is called.

Unrelated: fileupload should be an object not a function.

takielias commented 4 years ago

<form action="http://localhost/office/ci/askdoctor/ci/update-doctor-profile-image" role="form" class="php-email-form aos-init aos-animate" data-aos="fade-up" id="fileupload" enctype="multipart/form-data" method="post" accept-charset="utf-8">
        <input type="hidden" name="csrf_token" id="csrf_token" value="9d266fc4cbd6177fcb6eec36b452caad">
 <input id="thefiles" type="file" name="profile_image" accept=".jpg, .png, image/jpeg, image/png" class="ff_fileupload_hidden"><div class="ff_fileupload_wrap">
<div class="ff_fileupload_dropzone_wrap">
<button class="ff_fileupload_dropzone" type="button" aria-label="Browse, drag-and-drop, or paste files to upload"></button>
<div class="ff_fileupload_dropzone_tools"></div>
</div><table class="ff_fileupload_uploads">
</table>
</div>
 </form>

This is the Form. Is there anything wrong?
takielias commented 4 years ago

Content-Disposition: form-data; name="csrf_token"
-----------------------------230759894811474507753949726222
Content-Disposition: form-data; name="profile_image"; filename="91283375_3283129861716712_7017616463015968768_n.jpg"
Content-Type: image/jpeg
ÿØÿâICC_PROFILE

This is the params
cubiclesoft commented 4 years ago

Your form uses csrf-token while your code uses csrf_token.

takielias commented 4 years ago

Your form uses csrf-token while your code uses csrf_token.

What a shame!!! I'm really greatful for your time & effort.

cubiclesoft commented 4 years ago

Happens to the best of us. Took me 8 hours one time to track down a single character typo. Sometimes it helps to have a fresh pair of eyes.