Host image previews on the server using Dropzone.js

I'm currently utilizing Dropzone.js along with Angular.js for image uploads. However, I haven't been able to figure out a way to upload thumbnails to my server. 

.dropzone({
      url: "/gallery/add",
      maxFilesize: 100,
      paramName: "uploadfile",
      createImageThumbnails: true,
      thumbnailWidth: 200,
      init: function() {

        this.on('addedfile', function(file) {

           // potentially add code here

        });

        this.on('thumbnail', function(file){

         // or here

        });
      }
    });

The issue seems to specifically be related to thumbnails.

javascriptangularjsimage-uploadingdropzone.js

Answer №1

Unfortunately, Dropzone.js does not currently support this feature. A previous Github Issue had raised the same request in the past. While you can read through the discussions, I tend to agree with the initial commenter's viewpoint.

  1. The process of generating thumbnails for large images on the client side is slow due to browser limitations in image processing capabilities. This is why thumbnails are only automatically created for images smaller than 2MB.

  2. Creating thumbnails on the server-side is a more efficient, cost-effective, and versatile solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using regex in JavaScript to perform destructuring assignment

My current task involves reordering a specific string of text, 'Set 1 Total Games Over/Under 9.5', using regex to make it read as 'Under/Over N Giochi Set 1'. The code snippet that achieves this is as follows: let marketLabel = 'S ...

javascriptarraysregexdestructuring

Using Vue.js - Incorporate filtering functionality within the v-for loop

I've successfully implemented a Vue filter that restricts the length of an array to n elements. It functions perfectly when used like this: {{ array | limitArray(2) }} Now, I'm attempting to utilize it within a v-for loop as follows: <li v- ...

javascriptvue.jsvuejs2vue-componentv-for

Is there a way for my directive to prevent drag action when the dragleave event is triggered?

To enhance the manual sorting process of nested ngRepeats, I have implemented three directives: draggable, droppable, and drop boundary. The draggable and droppable directives are functioning correctly, utilizing event listeners to facilitate drag and dro ...

javascriptangularjsdrag-and-dropevent-handling

Updating data from an ajax call in chart.js can be done with a few simple steps

I have successfully generated a graph using data from an ajax call in a php file. Now, I want to enhance this graph by allowing users to select a specific customer from a drop-down list (chg_customer) and display the corresponding count on the chart. Altho ...

javascriptphpajaxchart.js

Enable Cursor Display in Readonly Input Fields

Consider this scenario: Setting an input field to .readOnly = true replaces the text cursor with a pointer arrow cursor, preventing users from entering or modifying the field. Interestingly, clicking into a readonly input field that already contains text s ...

javascriptjqueryevent-handlingdom-events

Issue with Lao font not displaying correctly on Ionic for Android version 4.3

My application requires the use of two languages, specifically Lao and English, and I am utilizing i18n for localization purposes. To customize the font family style for the Lao language, I have implemented the following code: @font-face { font-family: & ...

angularjsionic-frameworkinternationalization

collect information from text box

Is it possible to retrieve data entered into input fields that have not been submitted and display that data in another div by clicking a button? Can this task be accomplished using scripting languages? HTML <form> <div class="div1">< ...

javascriptjqueryajax

The fade-in effect will initiate from the start once the mouse leaves the element (with a

Currently, I am in search of a solution for improving the navigation menu I am developing. By clicking on this JSFiddle link, you can view the code in action. The issue I am facing is that the fadeIn effect should only occur when hovering over the nav-ite ...

javascriptjquery

Expanding a list in AngularJS: Implementing a scrollbar for a seamless user experience

I need assistance in creating a layout using AngularJS and angular-material that includes a vertical scrollbar when necessary: <div layout="column"> <div> <!-- Occupies 80% of window browser --> <md-list> <md-l ...

htmlcssangularjsscrollbarangular-material

Having trouble sending the request body via next-http-proxy-middleware

Recently, I've been attempting to develop a frontend using nextjs that communicates with a Java backend. To achieve this, I'm utilizing the npm package next-http-proxy-middleware. However, it seems like either my request body is getting lost in t ...

javascriptreactjstypescriptnext.jshttp-proxy-middleware

Adjusting jQuery inputmask mask according to dropdown selection: A complete guide

I am utilizing jQuery inputmask to achieve a specific effect: Currently, I have set up a simple formatting for US & Canada phone numbers like this: $("#user_phone").inputmask("mask", { "mask": "(999) 999-9999" }); However, I want to dynamically chan ...

javascriptjqueryhtml

Extracting content from a page that requires JavaScript to be rendered

I need to extract data from a dynamically rendered JavaScript page using Selenium web driver in Python3. I've tried various drivers like Firefox, Chromedriver, and PhantomJS, but I always end up with the script rather than the DOM element. Below is a ...

javascriptpython-3.xseleniumselenium-webdriver

One way to submit a value form in an iframe is by double clicking

I am looking to submit a value form in a frame that functions as described below: index.php <form action="iframe1.php" method="post" target="iframe1"> <input type="text" name="lala"> <input type="submit"> </form> <iframe name= ...

javascriptphpjqueryformsiframe

Guide on retrieving a value from a function that invokes $.getJSON

function searchAndRetrieve(searchTerm) { var defaultResult = 1010; var resultValue = defaultResult; $.getJSON(remote, function(data) { if (data != null) { $.each(data.items, function(i, item) { ...

javascriptjqueryreturn-valuegetjson

Angular 6 canvas resizing causing inaccurate data to be retrieved by click listener

The canvas on my webpage contains clickable elements that were added using a for loop. I implemented a resizing event that redraws the canvas after the user window has been resized. Everything works perfectly fine when the window is loaded for the first ti ...

javascriptangularhtml5-canvas

JavaScript/HTML5/jQuery Drag-And-Drop Upload - "Error: Unable to access the 'files' property"

Just a heads up, my JavaScript skills are pretty limited. Here is the current JavaScript code I have: $('#xhr-filebox').bind({ "dragover": HandleDragEvent, "dragleave": HandleDragEvent, "drop": HandleDropEvent }); function HandleDr ...

javascriptjqueryhtmlfile-uploaddrag-and-drop

Verify if there is a date present within the JSON entity

I have a PHP array containing date strings and I want to validate them using a native HTML5 date input element. To achieve this, I have converted the date array into a JSON object for use with JavaScript: <script> var date_array = <?php echo json ...

javascriptjsonhtmldateobject

Issue: Uncaught Error in Summernote and Electron - Module 'jquery' not found

Trying to integrate Summernote into an Electron application has presented a challenge. Including summernote.js in the project consistently triggers the following error: Uncaught Error: Cannot find module 'jquery' at Module._resolveFilename ( ...

jqueryangularjselectronsummernote

What is the way to bypass certificate validation when making a Fetch API request in the browser?

The code snippet below is currently being executed in the browser: const response = await fetch(`${url}`, { method: 'POST', headers: { Authorization: `Basic ${authorization}`, }, body: loginData, }) Upon calling this co ...

javascriptfetch-api

The ng-repeat directive in AngularJS does not function properly when making a service call over HTTP

I am working with a single array item that contains complex JSON objects, and I am tasked with accessing these objects using ng-repeat in AngularJS. I have created a fiddle for reference. If anyone has any solutions, I am open to suggestions. The specifi ...

javascriptjsonangularjs