This is the part 2 of 2 in DropzoneJS + Go series. Part 1: How to build a file upload form Part 2: How to display existing files on server DropzoneJS + Go: How to display existing files on server In this tutorial, we will show you how to display existing files on the server when using DropzoneJS and Go. This tutorial is based on . Make sure you have read it before proceeding to content in this tutorial. How to build a file upload form using DropzoneJS and Go Table Of Content Preparation Modify the Server side Modify the Client side References The End Preparation Install the go package “github.com/nfnt/resize” with , we need it to create thumbnails. go get github.com/nfnt/resize In previous . We have already set up a proper working DropzoneJs upload form. There is no additional file needed for this tutorial. What we need to do is to make some modifications to file below: tutorial main.go views/upload.html Let us get started! Modify the Server side In previous tutorial. All “/upload” does is to store uploaded files to the server directory “./public/uploads”. So we need to add a piece of code to retrieve stored files’ information (name and size), and return it in JSON format. Copy the content below to “main.go”. Read comments for details. Modify the Client side Copy content below to “./views/upload.html”. We will go through modifications individually. We added Jquery library into our page. This actually not for DropzoneJs directly. We are using Jquery’s ajax function only. You will see below $.get We added an ID element (my-dropzone) to the form. This is needed because we need to pass configuration values to Dropzone. And to do it, we must have an ID reference of it. So that we can configure it by assigning values to Dropzone.options.myDropzone. A lot of people face confusion when configuring Dropzone. To put it in a simple way. Do not take Dropzone as a Jquery plugin, it has its own syntax and you need to follow it. This starts the main part of modification. What we did here is to pass a function to listen to Dropzone’s init event. This event is called when Dropzone is initialized. Retrieve files details from the new “/uploads” via ajax. Create mockFile using values from server. mockFile is simply JavaScript objects with properties of name and size. Then we call Dropzone’s and functions explicitly to put existing files to Dropzone upload area and generate its thumbnail. addedfile thumbnail Running the server Open the terminal at the current project’s directory and execute: $ go run main.goNow listening on: http://localhost:8080Application started. Press CTRL+C to shut down. If you have done it successfully. Now go and upload some images and reload the upload page. Already uploaded files should auto display in Dropzone area. References http://www.dropzonejs.com/#server-side-implementation https://www.startutorial.com/articles/view/how-to-build-a-file-upload-form-using-dropzonejs-and-php https://docs.iris-go.com https://github.com/kataras/iris/tree/master/_examples/tutorial/dropzonejs The end Hopefully this simple tutorial helped you with your development. If you like my post, please follow me on and help spread the word. I need your support to continue. Twitter _The latest Tweets from Gerasimos Maropoulos (@MakisMaropoulos). That #golang guy. Self-taught Developer with 10+ years…_twitter.com Gerasimos Maropoulos (@MakisMaropoulos) | Twitter I like the visual effects when , do you? It’s simple: just click the clap button. If you feel strongly, click it more I click the clap button more than once (or just hold it down).

Initialized

How to display existing files on server using DropzoneJS and Go

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Todo MVC Application using Iris and Vue.js

104 Stories To Learn About Go

The Noonification: How to Use React to Replace useEffect (12/31/2022)

3 Golang Pitfalls Every Developer Needs to Know

207 Stories To Learn About Golang

2 Error-Free Options for Decimal handling in Golang

A Todo MVC Application using Iris and Vue.js

104 Stories To Learn About Go

The Noonification: How to Use React to Replace useEffect (12/31/2022)

3 Golang Pitfalls Every Developer Needs to Know

207 Stories To Learn About Golang

2 Error-Free Options for Decimal handling in Golang

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps