File Upload Setup - Node.js/Express/MongoDB Course #4

In this video we will be improving the file upload process by:
1. Implementing FilePond
2. Adding a file upload preview
3. Implementing drag and drop upload
4. Storing files in the database for Heroku

Code For This Video:

Previous Video:

Next Video:

Playlist:

Twitter:

GitHub:

CodePen:

[sumanpaul]

For those who are still unable to get the filepond library to work. Here is a solution.



Include all the scripts without using the defer keyword right under <%- body %>. But don't include the fileUpload.js. And remove all the scripts from the head tag

For the fileUpload.js file, right under the last script open a new script tag and enter the following-




const inputElement =
const pond =


And close the script tag

@Web Dev Simplified I don't know why the filepond library isn't working on the inside _form_field.ejs

[axelthescarecrow]

Edit your fileUpload to:
document.addEventListener('DOMContentLoaded', function() {



const inputElement =
const pond =

});
And it will all work! :)

[sierramikekilo]

If you are new to web dev like me, and tried to install the filepond library with npm install command instead of using <script src pointing to the CDN, then you problably ran into some troubles: You can't use the require method inside the browser, so you won't be able to initialize the FilePond object. So, to solve that, you have to use a bundler, like browserify, to convert code that is meant to run inside the node environment to the browser environment. I wrote all my filepond implementation code in a fileUpload.js file, then I used browserify to make a bundle.js (from fileUpload.js). Then I appended this bundle.js file in the layouts.ejs with <script defer src="/dist/bundle.js"></script>, and vóila, it worked.

[flowerofash]

important parts:
- 9:56 udate the field type into buffer.
- 12:32 turn the base64 string from client side into buffer
- 15:09 turn buffer into data URL syntax with base64 encoding for client side

[okomi]

Hey guys, if you are having problems with FilePond even showing up on your view after copypasting all the scrips to the layout.js notice that
At 4:18 Kyle copypast the line "
Notice the ";" at the end if you dont remove it FilePond will not show up properly on your layout and instead you will get the generic select file button.
Took me all day + cloning the project from Kyle's github to find out.
Desktop debugging was easier :D

[MrBestGamer]

Question i have during this course.

at 3:34 for example, how does the system know, that we are tagging the public folder ?
I know that we set in our server.js file, but i dont know how this corresponds to that @Web Dev Simplified

[meirgazit]

<%- body %>
<script>
document.addEventListener('DOMContentLoaded', function() {



const inputElement =
const pond =

});
</script>
</div>
</body>
</html>

[turost]

When creating a new book, if you don't add a cover image, the page will crash, or at least load infinitely for me. The error happens specifically here:


const cover = JSON.parse(coverEncoded)


I think this is because the saveCover method is outside of the try catch inside the post route. You might resolve this in a later video but that was something I had a problem with.

[threefor]

Great way to learn manage files, implementing express-js/mongoose. Thanks for sharing!

[irisheilad]

This was EXACTLY what I've been looking for. Thanks so much!

[kirtisoni]

Can you briefly explain the usage of FilePond and where it actually stores the file? please.

[andreweinhorn]

Does storing image files in the database slow down database processing? That is, if there were hundreds of thousands (or millions) of images stored in this way, would it slow things down?

[kaylawilson]

Anyone else who got a 404 that couldn't load the fileUpload.js -> in the video he specifies the path as "javascripts/fileUpload.js" but it should be "/javascripts/fileUpload.js"

[slopper]

IMPORTANT:
This return statement will break the template string if you split it into two lines! Keep it as one long line or add an escape character to make it work over two lines. I think some people in the comments are trying to fix this same problem. This happens because JavaScript automatically adds a semicolon to the end of the line, it doesn't know we want to continue our return statement on the next line.
if (this.coverImage != null && this.coverImageType != null) {
return `data:${this.coverImageType};charset=utf-8;base64, ${this.coverImage.toString('base64')}`
}

[AnnieTaylorChen]

What do people do in real life? Do they actually store files on a file system on the server like Heroku except it will be kept? Or they might buy extra file system to store, but in similar way? Usually we don't store files in database right, we use it just because it's convenient for our small project which requires one small image per schema?

[HostDotPromo]

Pretty cool storage technique dude 🔥like the preview display

[klayme]

SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
I get this error and im not sure what to do

[cv]

Awesome project and video series! Thank you! 🔥

[vijayraghunathkm]

Really web dev simplified.. Awesome series.. I am nearing completion :)

[bryanneuswanger]

Excellent videos -- I am following along and learning a lot (and being confused a lot, as much of this is brand new for me). Question: How do we set it up so that the local database entries we have are sync'd with the database on Atlas? If I spend time putting books into my local database, it sure would be nice if they'd sync up. Does this come later in the series, or is this something people just don't generally do?