es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Implementando Dropzone en un formulario en ASP.net error 404

18 Jun, 2023 Programación

Actualmente estoy tratando de implementar una zona de carga en un formulario preexistente utilizando páginas de razor de asp.net. Mi div que contiene la zona de carga se ve así:

<div class="form-group">
    <label class="control-label">Agregar archivos</label><br>
    <div runat="server" class="dropzone dz-clickable" id="myDropzone"></div>
</div>

y mi js se ve así:

Dropzone.options.myDropzone= {
    url: '/uploads/image',
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true
}

Con esto obtengo un error 404 aunque haya configurado una carpeta en la carpeta wwwroot llamada cargas y todavía estoy obteniendo el error. Quiero que estos archivos se carguen en este directorio para poder procesarlos cuando se presiona el botón de envío. Actualmente puedo enviar los archivos al archivo C# llamando Request.Form.Files solo usando <input type="file">, pero no he podido hacer que la zona de carga funcione de manera similar.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para implementar una zona de carga en un formulario preexistente utilizando asp.net Razor pages

    El error 404 que estás experimentando probablemente se deba al hecho de que la URL especificada en tu código js no coincide con la URL o punto final correcto para la carga de archivos. Verifica la URL y asegúrate de que esté apuntando al lugar correcto.

    Para cargar archivos utilizando dropzone, necesitas manejar la carga de archivos en el lado del servidor. En tu aplicación asp.net Razor pages, puedes crear un PageModel que maneje la carga de archivos, de la siguiente manera:

    “`C#
    public class UploadModel : PageModel
    {
    public async Task OnPostUploadAsync()
    {
    var files = Request.Form.Files;

        // procesa los archivos según sea necesario

    return RedirectToPage("/SuccessPage");
}

    }


    En tu código js de dropzone, puedes especificar la URL para el punto final de carga de archivos de la siguiente manera:

```js
Dropzone.options.myDropzone = {
    url: '/Upload?handler=Upload', // apunta a la URL correcta y al método de controlador
    method: 'post', // utiliza el método post
    addRemoveLinks: true,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    uploadMultiple: true,
    parallelUploads: 5,
    dictRemoveFile: 'Eliminar',
    success: function (file, response) {
        console.log('¡Archivo cargado!');
    },
    error: function (file, response) {
        console.log('¡Error al cargar el archivo!');
    }
};

    Cuando envíes el formulario, los archivos se cargarán en el punto final especificado y podrás acceder a ellos en el método OnPostUploadAsync() de UploadModel.

    Asegúrate de que la URL apunte al punto final correcto y de que la carpeta en la que estás cargando tenga los permisos de escritura necesarios.

Comments are closed.