Restricted to 2 uploads

[laural4705]

Thanks for the uploader, it is really great. I have it implemented and it works just as it should. My only problem is that it hangs after 2 successful uploads. Won't upload properly again until I refresh the page. Any thoughts? I have implemented within Laravel.

                <script type="text/javascript">
                  $(function() {
                   $('#photos').FancyFileUpload({
                     url: "{{  route('assetPhotos.store') }}",
                       params : {
                          _token: $('#storePhotos').find('input[name="_token"]').first().val(),
                         },
                          maxfilesize : 1000000,
                          edit: false,
                        });
                    });
                </script>

[cubiclesoft]

Hmm...the demo page seems fine with multiple file uploads in Firefox:

https://barebonescms.com/demos/admin_pack/admin.php

Since it works for me, it's hard to track down the source of the issue. Could be anything from something Laravel is doing, a bug in jQuery, a browser plugin interfering, something browser-specific, etc. Would be helpful if you could help narrow down the issue.

[laural4705]

Thanks for the reply. I don't believe it is browser related because the same thing happens on multiple browsers. The first 2 images are uploaded and are placed into the correct web directory, but they do generate an error:

    jquery.fancy-fileupload.js:14
    Uncaught TypeError: Cannot read properties of undefined (reading 'replace')
    at EscapeHTML (jquery.fancy-fileupload.js:14:15)
    at UploadFailed (jquery.fancy-fileupload.js:433:134)
    at HTMLInputElement.UploadDone (jquery.fancy-fileupload.js:454:5)
    at $.<computed>.<computed>._trigger (jquery.ui.widget.js:762:13)
    at $.<computed>.<computed>._onDone (jquery.fileupload.js:957:14)
    at $.<computed>.<computed>._onDone (jquery.ui.widget.js:155:24)
    at S.fn.init.<anonymous> (jquery.fileupload.js:1008:24)
    at c (jquery.min.js:2:28327)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:29072)
    at l (jquery.min.js:2:79901)

then the next image hangs...

my form:

           <form id="formData">
                <div class="form-group mb-0">
                    <input id="ourFile" type="file" name="ourFile" accept=".jpg, .png, image/jpeg, image/png" multiple />
                    @csrf
                </div>
            </form>

my script:

        <script type="text/javascript">
            $(function () {
                $('#ourFile').FancyFileUpload({
                    url : "{{ route('assetPhotos.store') }}",
                    params : {
                        _token: $('#formData').find('input[name="_token"]').first().val(),
                    },
                    maxfilesize : 1000000,
                    edit : false
                });
            });
        </script>

I am using Laravel, XAMPP and am on Windows

[cubiclesoft]

It's clearly a server side problem. Look in the Network tab of your Developer Tools to see what is coming back from the server.

[thayronarrais]

I'm having the same problem, in the same ecosystem, Laravel, where I can upload two files with error (but it really works in the backend, they're there).

I discovered the reason for the problem: if the return from the controller doesn't have a json with success = true, it won't work, code 200 is not enough