The issue of Dropzone's renameFilename function not functioning properly when a file is

I'm running into an issue with the removedfile function in DropzoneJs. It seems to only delete the first file uploaded and there seems to be a problem with my renameFilename function.

Everything works smoothly if I don't rename the image, but I'd like each image to have a unique name. There appears to be an error when it comes to assigning a value to filename.

When I upload multiple images and try to delete them, only the first image gets deleted while the others remain. The "request" variable seems to retain the name of the first photo.

Dropzone.autoDiscover = false;

var name;

var Dropzone = new Dropzone(".dropzone", {
    maxFileSize: 50,
    acceptedFiles: ".jpg,.png",
    addRemoveLinks: true,
    renameFilename: function (filename) {
        name  = new Date().getTime() + '-' + filename;
        return name;
    },
    removedfile: function(file){
        $.ajax({
            type: 'POST',
            url: route('product.images.remove'),
            data:{
                name: name
            },
            dataType: 'html'
        });
        var _ref;
        return(_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
    }
});

Answer №1

If you are using the most up-to-date version of Dropzone.js, please note that renameFilename has been updated to: renameFile

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

Angular and the Client IP Address

I am trying to retrieve the client's local IP address within an internal network using Angular. This data will be sent to an IP address within the network without requiring authorization. I have searched extensively online but have only found methods ...

Show a checkbox element with a square in the center instead of a tick mark

Is there a way to create a custom checkbox in HTML with a black box in the center, similar to the third checkbox shown in the image below? I've noticed this design in many interfaces, but I haven't been able to find a satisfactory example online ...

Synchronize chat messages automatically with the scrolling window using AJAX technology

Original Content Scrolling Overflowed DIVs with JavaScript In my AJAX chat application, messages are displayed in a div with overflow: auto, enabling the scroll bar when the content exceeds the space. I am looking for a solution that automatically scrol ...

What is the process for retrieving the data transmitted via Jquery.getJSON on the server side?

This is the $.getJSON call I'm using on the client side: $.getJSON('/video/getToken', {classroomId: roomName}, cb); And this is what I have on the server side: router.route('/video/getToken') .get(function(req, res) { ...

Testing ng-content in Angular 2

Is there a way to test the functionality of ng-content without the need to create a host element? For instance, let's say we have an alert component - @Component({ selector: 'app-alert', template: ` <div> <ng-conten ...

What is the best method for preserving state.Data and state.isValid within the ADYEN Card Component?

After meticulously going through the documentation and following each step carefully, I have encountered a problem in the handleOnChange function. Whenever I try to post the data, an error pops up: ERROR Here's my current approach to posting the dat ...

Tips for correctly importing modules into a threejs project

I've been trying to include modules in order to utilize the bloom effect, however, I keep encountering this error message. The .js files were copied from three/examples/js/, so they are current. index.html: <script src="../module/three.js&quo ...

In the useEffect hook, the context userdata initializes as an empty object

I am facing an issue with my code where the imported object is not being read by useEffect. The user object is imported from another context and when I try to use it in the useEffect of DataContext, it returns an empty object. I suspect that useEffect is b ...

Struggling to detect a click event within a VueJS application when using a bootstrap button-group

I am currently working on a VueJS project that includes a bootstrap button group... <div class="btn-group btn-group-xs pull-right" data-toggle="buttons"> <label class="btn btn-primary label-primary"> <input type="radio" name="options" i ...

Angular CORS problem when sending information to Google Forms

When submitting the data: Error Message: Unfortunately, an error occurred while trying to send the data. The XMLHttpRequest cannot load https://docs.google.com/forms/d/xxxxxxxxxxxxx/formResponse. The response to the preflight request did not pass the ac ...

Guide on NodeJS: Harnessing the power of nested functions to ensure synchronous execution

Imagine two functions, A and B, both interacting with a MySQL database using connection.query(...) methods. Function A utilizes a while loop to navigate through the response it receives. Subsequently, function B is invoked with the response from function ...

Error: Discord bot encountered a TypeError while attempting to access the property 'id' of an undefined value

After revisiting a previous Discord bot package designed to track website updates, I encountered an issue. The code was originally scraped and last edited about 8 months ago with success. However, upon running node index.js, the following error occurred. ...

Combine the text value from a textbox and the value from a checkbox into a single

I'm trying to solve a challenge regarding appending values from text fields (excluding empty ones) and checkboxes in a specific order to form a string. It should be in the format: name|T|F_name|F|F. Once I've created this string, I plan to send i ...

The shopping cart in our e-commerce website is refreshed in real-time thanks to the integration of J

I am currently enhancing the Codeigniter Cart with JQuery by making an Ajax call for updates. Below is my JQuery function: $(function() { $('.cart_form select').on('change', function(ev) { var rowid = $(this).attr('c ...

What is the process of importing a file as text into vite.config.js?

Within my project directory, there is a simple SCSS file that I need to access its content during the compilation process in order to transform it in vite.config.js. However, I am unsure of how to retrieve its content. I have successfully obtained the cont ...

The functionality of the jquery Tab will only be enabled if the script is referenced from the same local page

Attempting to implement jquery UI tab in an MVC4 application. All the necessary scripts and styles have been added in bundleconfig and referenced in layout.cshtml page. Please see the code below: <div id="tabs"> <ul> <li><a ...

Accessing the camera or photo library in React Native does not require any permissions

In my current project, I am developing an app that requires users to upload images from their photo library or camera. To access the camera functionality, I am utilizing the react-native-image-picker library without integrating react-native-permissions. ...

Error: Trying to access the 'title' property of an undefined variable in Vue.js

Creating a replica of hackernews by utilizing the axios API. The NewItem.vue component is not receiving any data, resulting in an error — TypeError: Cannot read property 'title' of undefined. Can you identify what's causing this issue in t ...

reCAPTCHA v3 - Alert: There are no existing reCAPTCHA clients available

After coming across a similar issue on Stack Overflow (link to the question here), I attempted to implement reCAPTCHA on my website to combat spam emails received through the form. Despite following Google's instructions, I encountered an error that p ...

My initial reaction to the code

I recently completed my first React code, which is the classic "Hello World" example. Unfortunately, I'm encountering some issues with it and despite trying various solutions, nothing seems to work. Below is the code snippet: <html> <h ...