0

I would like to create a web app with Express and Node.js. I'm currently trying to let user uploads a profile picture and I use Dropzone.js. Here, what I did for now :

<script type="text/javascript">
    Dropzone.options.ppDrop = {
        paramName: username,
        maxFilesize: 10, // MB
        maxFiles : 1,
        uploadMultiple = false,
        acceptedFiles : "image/*",
        dictDefaultMessage : "Drop files here or click to upload"
    };
</script>
<form action="/PPupload" method="post" class="dropzone" id="ppDrop" enctype="multipart/form-data">
    <div class="fallback">
        <input name="pic" type="file" />
    </div>

</form>

But it doesn't work. What I did wrong ?

I also need help to define a route that could store the image in an internal folder and display it after the user confirms his choice. How I could do that ? Many thanks in advance !

phenric
  • 307
  • 1
  • 8
  • 15
  • Do you get any errors in your browser console? Did you include the `src` attribute for the script file location? – TheOdd Jul 11 '17 at 19:00
  • I get 2 errors, the first one is "Uncaught SyntaxError: Invalid shorthand property initializer" and the second one is "Failed to load resource: the server responded with a status of 500 (Internal Server Error)". I just put the script into the head. – phenric Jul 11 '17 at 19:50
  • Can you add the express route that you're using to handle that page? – TheOdd Jul 11 '17 at 20:07
  • Also, the uncaught syntax error is on line 6 where is says `uploadMultiple = false`. It should be `uploadMultiple: false`. – TheOdd Jul 11 '17 at 20:08
  • ` app.get('/edit', isLoggedIn, function(req, res){ var user = req.user; var title = user.first_name+" "+user.last_name; res.render('editProfile.ejs', {title: title, first_name: user.first_name, last_name: user.last_name, username: user.username, email: user.email}); }) ` Thank you ! – phenric Jul 11 '17 at 20:12
  • Did it work? If so, I can post it as an answer. – TheOdd Jul 11 '17 at 20:13
  • Yeah it works for the script ! Many thanks ! Do you have advices to save image in internal folder ? And displaying it ? – phenric Jul 11 '17 at 20:16
  • I posted the answer, I can get back to you on the image and internal folder later. For now, I have to go. – TheOdd Jul 11 '17 at 20:18
  • Many thanks ! I'm waiting further informations ;) – phenric Jul 11 '17 at 20:24
  • Look at [this](https://stackoverflow.com/a/16524630/6836963) answer for help with the image. Place the image file in a static/public folder and specify that path as the static path. You can now refer to it in `` tags with something like ``. Sorry if this wasn't what you were looking for, please let me know and I can try and get some more info if I can. – TheOdd Jul 12 '17 at 16:32

1 Answers1

0

You're trying to set an object property with an = instead of a :. The fixed code would look like this:

Dropzone.options.ppDrop = {
    paramName: username,
    maxFilesize: 10, // MB
    maxFiles : 1,
    uploadMultiple : false,
    acceptedFiles : "image/*",
    dictDefaultMessage : "Drop files here or click to upload"
};
TheOdd
  • 265
  • 1
  • 16