Why does {"files":[]} show up when try to run blueimp uploader?

Question

I have followed these directions:

You can install Node.js sample to your server via npm. npm install blueimp-file-upload-node

Start service: ./node_modules/blueimp-file-upload-node/server.js

Download plugin, unzip it, edit index.html and point form action to your Node.js (i.e. to http://localhost:8080). You can also upload project files to any other server and use it as a UI to upload files to Node.js server.

When I navigate to local host 8888, I get a file array: {"files":[]}. Local host 8080 doesn't connect.

This is the form action on the index page:

    <form id="fileupload" action="//localhost:8888" method="POST" enctype="multipart/form-data">

I'n new with node and application development. Any help would be really appreciated. Thanks.

Answer 1

Looking at the code in that module, the default port is 8888 so use localhost:8888 for the service.

Navigating to localhost:8888 will return the list of files that have been uploaded so far. In your case this directory is empty, and it was empty too for me initially.

You can manually put files in the upload directory to test - I did this:

touch node_modules/blueimp-file-upload-node/public/files/test.txt

Then when visiting localhost:8888 I got:

{"files":[{"name":"test.txt","size":0,"deleteType":"DELETE","deleteUrl":"http://localhost:8888/files/test.txt","url":"http://localhost:8888/files/test.txt"}]}

This is good news! To actually post a file, you're going to need a bit more than that example you gave though.

In a sample.html I used (taken from here)

<form enctype="multipart/form-data" action="http://localhost:8888/upload" method="POST">
    <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
    <label for="upload-file">Choose a file to upload:</label>
    <input name="uploadfile" id="upload-file" type="file" /><br />
    <input type="submit" value="Upload File" />
</form>

Using that form to select and upload a file made it available.