aguidrevitch / jquery-file-upload-middleware Goto Github PK

I want to get screenshot and encode the file when I upload video.I don't find the right place to do this.
I first add some code in the 'end' event,but the operation is asynchronous too,so I can't change the fileInfo.

error in cmd:
"
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:945:11)
at Process.ChildProcess._handle.onexit (child_process.js:736:34)
"
without imageVersions - ok

thank you

Hi,

Since I've update to 0.0.5 from version 0.0.1 , I've now an issue when uploading file:

events.js:66
throw arguments[1]; // Unhandled 'error' event
^
Error: ENOENT, open 'C:\tmp\6e06e9ef40fd277e5d57036897bcec5b'

Any Idea ?

Thanks.
Olivier

-strip is used to remove all EXIF information, and no rotation is applied. Hence, pictures taken on a smartphone (at least an iPad or iPhone) will be rotated incorrectly.

An easy fix is to include '-auto-orient' in the imageMagick.resize() call:

                            imageMagick.resize({
                                width: opts.width,
                                height: opts.height,
                                srcPath: options.uploadDir() + '/' + fileInfo.name,
                                dstPath: options.uploadDir() + '/' + version + '/' + fileInfo.name,
                                customArgs: ['-auto-orient']
                            }, finish);

Hi,
I am using jQuery File Upload Plugin's client code and jquery-file-upload-middleware as backend server.
I found a problem is that the jquery-file-upload-middleware return JSON data is not compatible with jQuery File Upload Plugin's requirement, then the problem "Empty file upload result" is always represent. However, the file is upload succeed, just the client can not properly display the result.

I catch the request and found the return JSON data is:
[
{
"name": "iPhone5 docking station.jpeg",
"originalName": "iPhone5 docking station.jpeg",
"size": 9584,
"type": "image/jpeg",
"delete_type": "DELETE",
"url": "http://localhost/uploads/iPhone5%20docking%20station.jpeg",
"delete_url": "http://localhost/product/upload/iPhone5%20docking%20station.jpeg",
"thumbnail_url": "http://localhost/uploads/thumbnail/iPhone5%20docking%20station.jpeg"
}
]

And i google this issue found a issue on jQuery File Upload Plugin's page: blueimp/jQuery-File-Upload#365
There @OneDivZero said the latest jQuery File Upload Plugin's JSON format was changed from: [{file1}, {file2}] to: {files: [{file1}, {file2}]}.

So i try to change the jquery-file-upload-middleware code in lib/filehandler.js:
//res.json(200, result);
//MODIFY & TODO, should sumbit issue to the https://github.com/aguidrevitch/jquery-file-upload-middleware
res.json(200, {files: result});

Then everything is fine.

Is this a bug?

Hi,
awesome work, uploading works fine.
But if I upload an image and have imageVersions set:

upload.configure({
uploadDir: __dirname + '/public/uploads',
uploadUrl: '/uploads',
imageVersions: {
thumbnail: {
width: 80,
height: 80
}
}
});

I get the following error:
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:975:11)
at Process.ChildProcess._handle.onexit (child_process.js:766:34)

Any idea what this is due?

ps.

• I've tried running node through sudo, no change
• Uploading works perfectly fine

There has been an attempt to fix this but this change is not included in recent version anymore. ( I am using 0.1.7, this was supposed to be merged from 0.1.5 but hidden field values are not being parsed ).

#31

I manually changed this line in 0.1.7 and it does the trick.

https://github.com/aguidrevitch/jquery-file-upload-middleware/pull/31/files#diff-a84ee0d243cb843eb7bb4793154ca75fR65

Can this be merged to new version?

Hi, I am using the middleware to handle uploads in a pretty basic manner. However, I send extra info along with the file in order do additional processing for it on the server. I don't see it echoed back in the response, and I added an .on('begin',..) handler to inspect the 'fileInfo' passed and it doesn't include it as well. Is the extra formData ignored by this middleware?

This middle ware is working fine but when trying to upload image files the thumbnails are not created and the server is halted. When ever I try to upload image files I get the below message logged in my terminal :

events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:980:11)
at Process.ChildProcess._handle.onexit (child_process.js:771:34)
10 Nov 12:30:41 - [nodemon] app crashed - waiting for file changes before starting...

I have installed 'swig' and 'imagemagick' dependencies also.

I'm trying to use dynamic dir but not working when i put my upload configuration after

app.use(passport.initialize());
app.use(passport.session());

I need to put after this because i want to use the req.user._id and this info come from my passport and it's only available before passport.initialize() and passport.session()

When i put my upload config before app.use(passport.initialize());, without dynamic dir, all runs as expected.

Is there an example of this posted anywhere?

i think that would be a nice addition to this. If not, I may put one together.

Is it possible to rename files before responding to the client?
Thus, when I do something like:

upload.on "end", (fileinfo) ->
  console.log fileinfo

fileinfo's name is a rename one and NOT the original file's names!

Thank you!

Hello

I have a weird problem, I'm working on creating a one interface to permit only load one file, it works well when I load the file for the first time, but when I load another file after deleting the previous file, this new file is uploaded twice, and then if I closed the view and open again to load a new file, the file is uploaded three times, I'm using this code to upload in the server.

app.use('/upload', function(request, response, next){
upload.fileHandler({
uploadDir: function(){
return __dirname + '/site/public/uploads/' + request.session.login;
},
uploadUrl: function(){
return '/site/uploads/' + request.session.login;
}
})(request, response, next);
upload.on('begin', function(fileInfo){
logger.debug("starting loading a file");
var ext = fileInfo.name.substr(fileInfo.name.lastIndexOf('.') + 1);
var newFile = shortId.generate() + '.' + ext;
request.session.newFile = newFile;
logger.debug("file uploaded " + request.session.newFile + " - " + newFile);
fileInfo.name = newFile;
});
upload.on('end', function(fileInfo){
logger.debug('file uploaded ' + fileInfo.name);
});
});

I would appreciate any suggestion.

Hi,

Very nice job you have done with this code. I'm wondering if you could improve initUrls function to handle case when your are behind a reverse-proxy.

var baseUrl = (options.ssl ? 'https:' : 'http:') + '//' + this.req.headers.host;

In my case, this.req.headers.host is rendering IP and Port instead of the url type in the browser.

Is it possible to cach it ?

Thanks,
Olivier

On IE9 with fallback to IFrame transport, the browser always popups a download save as window for "files.json".

Is there a specfic reason for sending the Content-Disposal header?
I dropped it as per derjust@56c640a and everything looks good now.

Also at the jQuery file upload docu I couldn't find a reference to this header. (Only the obvious one about content type blueimp/jQuery-File-Upload#1795)
I checked the content type and it set to plain/text as per jQuery documentation.

Maybe due to a missing, additional nosniff this could be solved in a cleaner way?

Very nice initiative. I will use it in my projects and give you feedback if any :)

Thank you for creating the middleware mate ^^

I've gotten the middleware to properly upload the files, but the done event's isn't getting triggered because it seems like the middleware isn't returning anything on the post. What am I doing wrong? I've attached a screen of the xhr request which successfully uploads, but doesn't get anything back...

upload.configure({
    uploadDir: __dirname + '/uploads',
    uploadUrl: '/upstream',
    imageVersions: {
        thumbnail: {
            width: 80,
            height: 80
        }
    }
});

...


app.use('/upstream', upload.fileHandler());

Thank you for this very useful library. I only have 1 question, is it possible to grab to orientation value from the file and save the file (in case it concerns an image) in the correct orientation? Or, if this is not possible, provide the orientation value in the response?

I found a strange issue when loading images with larger file size (1MB+) on my production environment. After the initial file is uploaded, only one of the imageVersions is process/saved. Also, the imageVersion that is saved is not consistent (sometimes large, sometimes small, etc.)

When testing locally everything works as expected, and all imageVersions are saved.

I have been using the example code provided with the module:

var resizeConf = require('./config').resizeVersion;
app.use('/upload/location', upload.fileHandler({
tmpDir: dirs.temp,
uploadDir: __dirname + dirs.location,
uploadUrl: dirs.location_url,
imageVersions: resizeConf.location
}));

CONSOLE OUTPUT:
files upload complete
{ name: '1MB-Picture.jpg',
originalName: '1MB-Picture.jpg',
size: 1154230,
type: 'image/jpeg',
deleteType: 'DELETE',
url: 'http://localhost:8000/uploads/location/1MB-Picture.jpg',
deleteUrl: 'http://localhost:8000/upload/location/1MB-Picture.jpg',
thumbnailUrl: 'http://localhost:8000/uploads/location/thumbnail/1MB-Picture.jpg',
smallUrl: 'http://localhost:8000/uploads/location/small/1MB-Picture.jpg',
mediumUrl: 'http://localhost:8000/uploads/location/medium/1MB-Picture.jpg',
largeUrl: 'http://localhost:8000/uploads/location/large/1MB-Picture.jpg' }

But when the exact same setup on my Debian virtual machine I get this:

CONSOLE OUTPUT:
files upload complete
{ name: '1MB-Picture.jpg',
originalName: '1MB-Picture.jpg',
size: 1154230,
type: 'image/jpeg',
deleteType: 'DELETE',
url: 'http://dev.mywebsite.com/uploads/location/1MB-Picture.jpg',
deleteUrl: 'http://dev.mywebsite.com/upload/location/1MB-Picture.jpg',
mediumUrl: 'http://dev.mywebsite.com/uploads/location/medium/1MB-Picture.jpg' }

Also, when I go to delete the upload and let jquery-file-upload-middleware clean up the imageVersions, I get this error:

CONSOLE OUTPUT:
files remove complete
1MB-Picture.jpg
fs: missing callback Error: ENOENT, unlink '/mywebsite/public/uploads/location/thumbnail/1MB-Picture.jpg'
fs: missing callback Error: ENOENT, unlink '/mywebsite/public/uploads/location/small/1MB-Picture.jpg'
fs: missing callback Error: ENOENT, unlink '/mywebsite/public/uploads/location/large/1MB-Picture.jpg'

When the file size is small (1KB for example), everything works as expected on the production machine.

Any idea what could be causing this? I suspect there is some race-condition with the async or fs module.

app.use('/upload', function (req, res, next) {
// imageVersions are taken from upload.configure()
upload.fileHandler({
uploadDir: function () {
return __dirname + '/public/uploads/' + req.body.uid
},
uploadUrl: function () {
return '/uploads/' + req.body.uid
}
})(req, res, next);
});
app.use(express.bodyParser());

Is there a way to restrict the file upload route "/upload" from being accessed in the url by GET? I think this can pose a security / privacy issue. Thanks.

http://stackoverflow.com/questions/22419981/nodejs-jade-upload-file

Shoulnd't you add a next() at the end of the configuration?

        app.use('/upload', function (req, res, next) {
            // imageVersions are taken from upload.configure()
            upload.fileHandler({
                uploadDir: function () {
                    return __dirname + '/public/uploads/' + req.sessionID
                },
                uploadUrl: function () {
                    return '/uploads/' + req.sessionID
                }
            })(req, res, next);
            // This is the added Code
            next();
        });

In jquery file upload middleware I added a file(image) and cancelled it.once again added the same file it can not be uploaded

the lib dir is not included in the version available on npm.
The version on the npm registry is 0.0.3 while the latest version in the repo is 0.0.4.

I guess you just need to npm publish :)

Cheers!

I managed to setup the middleware with express.js 4.0 but am having difficulties moving uploaded files out of the public directory.

Here's my upload script:

    var upload = require('jquery-file-upload-middleware');
    upload.configure({
        imageVersions: {
            thumbs: {
                width: 80,
                height: 80
            },
            prev: {
                width: 1280,
                height: 1024
            }
        }
    });

    app.use('/admin/upload', function (req, res, next) {
        // imageVersions are taken from upload.configure()
        upload.fileHandler({
            uploadDir: function () {
                return __dirname + '/public/uploads/' + req.session.eventID;
            }
        })(req, res, next);

    });

Uploading a Chicken.jpg file i get the following structure:

    /public/uploads/  -> public uploads folder
        534a8d502e889f8d6bf9cc07/  -> upload session folder
            prev/  -> resized version
                Chicken.jpg
            thumbs/    -> another resized version
                Chicken.jpg
            Chicken.jpg   -> original file

I only want to move the "original file". Can anyone please advise?

Thank you!

My code:

var path = req.params.path;
upload.fileHandler({
tmpDir: config.get('app_path') + '/tmp',
uploadDir: config.get('app_path') + '/public/uploads/'+path,
uploadUrl: '/uploads/'+path
})(req,res);

    upload.on('end', function (fileInfo) {

        File.findOne({'url':fileInfo.url},function(err,finded){

            if(!finded) {
                var file = new File({
                    url:fileInfo.url,
                    name:fileInfo.name,
                    originalName:fileInfo.originalName,
                    size:fileInfo.size,
                    type:fileInfo.type,
                    directory:path
                });

                file.save(function (err, saved) {
                    if (err) log.error(err);
                })
            }
        });

    });

When you first load the file entirely perfect! When the function(upload.on('end',function) is performed subsequent to 1 times. As a result, my file is stored several times in the database. How to solve this problem?

Hi,

I installed image magic on my win7 and it works.(I can use convert comand line)

But in my thumbnail folder, i still dont have any images uploaded.

Otherwise the midleware works perfectly. Thank you for your work.

My question : Is there any configuration to make image resize work? For now i just added this ine the option.
imageVersions: {
thumbnail: {
width: 80,
height: 80
}
}

Now a new file is created imagefile(1).png when the image already exists. Can I set a config somewhere to overwrite this action and just replace imagefile.png with the just the latest uploaded one?

Thanks! Love the package!

Any plan to switch from imagemagick to gm?. Seems like imagemagick is not actively maintained.

I would like to rename the file that was uploaded to another name, and upload it to S3.

Where do you suggest I do this work? Should this be done on the FileHandler piece, or when the object gets returned to the page?

Hi.
I'm using your plugin and it works great but it doesn't seem to accept a image less them 100kb even if I use the option minFileSize: 1

How can I solve this? I work with upload of small thumbs and generally the images have less than 100kb.

This is my code ( also try to put the options on the upload.configure but it didn't help:

upload.fileHandler({
    uploadDir : function() {
        return config.app.uploadFolder + "/" + req.query.folder
    },
    uploadUrl : function() {
        return  "/a/img/" + req.query.folder 
    },
    maxPostSize: 1100000000, // 1 GB
    minFileSize: 1,
    maxFileSize: 1000000000 // 1 GB
})(req, res, next);

Hi! Could you look through the issue below please?

app.use('/upload', function (req, res, next) {
            // imageVersions are taken from upload.configure()
            upload.fileHandler({
                uploadDir: function () {
                    return __dirname + '/public/uploads/' + req.sessionID
                },
                uploadUrl: function () {
                    return '/uploads/' + req.sessionID
                }
            })(req, res, next);
        });

upload.on('end', function (fileInfo) {
   // I want to get __dirname + '/public/uploads/' + req.sessionID here without regexp- parsing fileInfo.url variable
});

I want to be able to trigger an additional event after the files have been uploaded. For example, after I upload an XML file, I would like to be able to hit a "Load Data" button which will take the file and do some stuff with it on the server side.

I have the GUI setup properly, and I added a few entries to filehandler.js and uploadhandler.js

//FILEHANDLER.js
handler.on('loadAction', function (fileName) {
        middleware.emit('load', fileName);
    });

//UPLOAD HANDLER.JS
.on('loadAction', function (e) {
            self.emit('load', e);
        })

I'm looking to do something like the below via the Middleware:

upload.on('loadAction', function (fileName) {
        console.log("Loading File: " + fileName);
        //some custom business logic here
    });

I'm not sure how to go about making this tweak... but it WOULD be a nice feature for the middleware down the road :)

If I use the maxChunkSize option, the uploaded file get split into multiple files - how can I get them to join automatically?

I could just turn off maxChunkSize but I'm uploading big files (a few GB).

Hi, your project looks great, but I have a problem I can't resolve :

I use the original jQuery file Upload form (the demo form) and I just modify the url in main.js to :

        url: 'http://localhost:3000/upload/stockEntryImage'

instead of :

        url: 'http://localhost:8888/'

when I want to use the server.js from the original project.

The fact is that the progress never ends in the front-end when I use your code.

I added this console.log to see the progress of the upload.

         .on('progress', function (bytesReceived, bytesExpected) {

            console.log("progress : "+bytesReceived+"/"+bytesExpected);

            if (bytesReceived > options.maxPostSize) {
                handler.req.connection.destroy();
           }

And it shows me this :
progress : 0/418959

and that's all, but when I use the original server.js I have this :
progress : 73789/418957
progress : 139325/418957
progress : 204861/418957
progress : 270397/418957
progress : 335933/418957
progress : 401469/418957
progress : 418957/418957

And it goes to the onFile event, thing that never happens with your code.

BUT, and here is what I don't understand, in each case I have the file successfully written to the /tmp/ directory.

Do you know from where comes the problem ?

please checkout https://github.com/soomtong/jquery-file-upload-middleware

• use bower to install jquery-file-upload
• use not npm to install jquery-file-upload-middleware
• use this repository by

{
    "name": "your project",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "express": "3.3.x",
        "jquery-file-upload-middleware": "git://github.com/soomtong/jquery-file-upload-middleware.git",
        "swig": "1.0.x",
        "imagemagick": "0.1.x"
    },
    "devDependencies": {
        "nodeunit":"*"
    }
}

working example included.

I am trying to implement this module with the demo front-end supplied by blue-imp. The server.js in the demo works fine but the module doesn't. I don't get any errors but when the upload starts on the browser I can see the post but it just stays in the pending state and no file is uploaded. The client eventually timesout. Do you have any ideas why this might be or how I can debug it?

Hello there first of all thank you so much for contribution.

I really like your library but there is one issue once I launch my website with Heroku The plugin does not worked but its work fine with Local computer.

Can anyone help me to come out, Here is my website url.
https://radiant-mesa-95812.herokuapp.com/

Thanks in advance,
Regards,
Ronak Amlani.

How does this handle cross-domain iframe transport. I'm only asking since I'm looking into a solution for angularjs and file upload that is supported in IE 9. I couldn't seem to find in your example one that explicitly supports that funciton of jquery-file-upload

Using 4.31.1 - this may be my lack of understanding middleware - but is there a reason I cannot use res.send(someData) from the upload.on('end', function(){}); event??

This always generates " Error: Can't set headers after they are sent." and kills node.

At the first, thanks to the plugin, it helps me a lot.

now I use the middleware on different router, it's like:

router.post(path1, upload.fileHandler(option1));
router.post(path2, upload,fileHandler(option2));

and base on different router, I want to handler end event in different ways.
Actually, I can set req.type or something like that, but which I don't think is the best solution.
So, how can I do?

Thanks.

Hi, I'm trying to figure out how to insert an additional value into the JSON response that gets sent back to the client. I'm pretty new to both Express and Node so forgive me if the answer is obvious. I'm using the upload.on('end') event to store some information about the uploaded file in a database and I want to take an id I get back from the database and send it back to the client in the JSON response. I tried something like fileInfo.myKeyName = 'some_new_key' at the end of upload.on('end'), but that does not appear to modify fileInfo prior to sending back the result. What would be the best way to modify that JSON response? Thanks for any help you can provide and thanks for making this module. It's really helpful.

There are times, when you want your user to upload only one file, in which case the extra "submit" button is redundant. Made attempts to submit form on upload in file_upload,js with
$("#gallery_dropzone").on("success", function () {
$('#location_upload').submit();
});
(can't do it in form as "update" button is dynamically created after form is read). Ideas?

Thanks - Every else working great.

When I upload images then I getting this error. [Error: Request aborted].

In filehandler.js this function is execute

handler.on('error', function (e) {
console.log(e);
middleware.emit('abort', e, req, res);
});.

So I am unable to get this images in router.
Is there any change required to make in configuration?.

can we code like this:?

  app.configure(function () {
        ...

        app.use(express.bodyParser());
        app.use(passport.session())
        ...
       app.use('/upload', upload.fileHandler());
    });

my mean is put the upload middleware in the end for use the passport session to restrict the user access.

Have my upload middleware configured as usual:

upload.configure({
        uploadDir: __dirname + '/public/uploads',
        uploadUrl: '/uploads',
        imageVersions: {
            thumbs: {
                width: 80,
                height: 80
            }
        }
    });

But my thumbs folder is empty. Tried also other image version - not working. There were no code changes on upload middleware.
Using jquery-file-upload-middleware v0.1.5, node v4.1.0 and express v4.13.3
Any ideas, am I missing something?

Before I let a user upload files, I want to perform an authentication check.

The uploading works fine if I just use the middleware like this:

app.use('/upload/blogs', function (req, res, next) {
    upload.fileHandler({
        uploadDir: function () {
            return __dirname + '\\public\\uploads\\blogs\\';
        },
        uploadUrl: function () {
            return '/uploads/blogs';
        }
    })(req, res, next);
});

If I add any sort of async middlerware prior to above code, the upload does nothing. e.g. adding the following use before the above code:

app.use(function (req, res, next) {
    var token = req.headers["x-authenticationtoken"];
    if (token == null)
        return next();
    tokenRepository.getUserByToken(token, function (result) {
            if (result.error != null) {
                req.currentUser = null;
                console.log("Not logged in");
            }
            else {
                req.currentUser = result.data;
                console.log("user authenitcated");
            }
            next();
        }
    );
});

If I comment out the async part like this, it will work:

app.use(function (req, res, next) {
//    var token = req.headers["x-authenticationtoken"];
//    if (token == null)
//        return next();
//    tokenRepository.getUserByToken(token, function (result) {
//            if (result.error != null) {
//                req.currentUser = null;
//                console.log("Not logged in");
//            }
//            else {
//                req.currentUser = result.data;
//                console.log("user authenitcated");
//            }
//            next();
//        }
//    );
    next();
});

Any ideas on what I'm doing wrong?

I am getting the following error when using the "imageVersions" option. If i remove it the upload works fine. Any idea what's causing it and how to fix? Thank you.

node: v0.11.12
express: 4.0.0

.write(string, encoding, offset, length) is deprecated. Use write(string[, offset[, length]][, encoding]) instead.
events.js:82
      throw er; // Unhandled 'error' event
            ^
Error: spawn ENOENT
    at exports._errnoException (util.js:745:11)
    at Process.ChildProcess._handle.onexit (child_process.js:1027:32)
    at child_process.js:1108:20
    at process._tickCallback (node.js:339:11)