6

Minha dúvida é a seguinte: imaginem um cenário onde eu tenho uma tela que tem um formulário, e neste formulário também existe upload de imagens. Vamos supor que eu preencha todo o formulario, e selecione 3 imagens no input type file, ao dar o submit, lá no controller eu tenho os atributos do formulário preenchido, e também a lista de HttpPostedBaseFile com as 3 imagens dentro, para eu fazer upload, porém o modelstate está com algum erro, e ele vai retornar para a view para mostrar este erro.

Acontece que todos os outros campos são preenchidos novamente com os valores, mas as imagens se perderam. O usuário precisa selecionar de novo as imagens.

Qual a melhor maneira de resolver isso? Eu queria que as imagens voltassem também.

2
  • 1
    Pesquisei e infelizmente não existe meios de restaurar o estado de um input type file, sendo que todos os usuário optaram por guardar os arquivos enviados na sessão. forums.asp.net/t/… Commented 20/01/2016 às 13:35
  • Por isso que as validações cliente são importante, agora com html5 pode ser menos traumático para o cenário dito. Não tem como voltar as imagens depois de enviar.
    – novic
    Commented 11/09/2016 às 2:26

2 Respostas 2

1

Qual a melhor maneira de resolver isso? Eu queria que as imagens voltassem também.

Usando o Backload. É um pacote que faz o gerenciamento de uma sessão de upload de arquivos no ASP.NET (pode ser MVC ou Web Forms).

Um exemplo usando jQuery File Upload, retirado do próprio GitHub do Backload:

@using System.Web.Optimization

@{
    ViewBag.Title = "Exemplo de Upload";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section styles {
    <!-- bootstrap styles -->
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

    <!-- Styles for the jQquery File Upload Plugin in Basic Plus UI style -->
    @Styles.Render("~/backload/blueimp/bootstrap/BasicPlus/css")

    <!-- The main application styles -->
    <link href="~/Content/demo.styles.css" rel="stylesheet" />
}

    <!-- Start of the render section -->
    <div class="container">
        <br>
        <blockquote>
            <p>
                File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery. 
                Supports cross-domain, chunked and resumable file uploads and client-side image resizing.
            </p>
        </blockquote>
        <br>
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
            <!-- The file input field used as target for the file upload widget -->
            <input id="fileupload" type="file" name="files[]" multiple>
        </span>
        <br>
        <br>
        <!-- The global progress bar -->
        <div id="progress" class="progress">
            <div class="progress-bar progress-bar-success"></div>
        </div>
        <!-- The container for the uploaded files -->
        <div id="files" class="files"></div>
        <br>
    </div>
    <!-- End of the render section -->


@section scripts {
    <!-- Bootstrap script -->
    <script src="~/Scripts/bootstrap.min.js"></script>

    <!-- Scripts for the jQquery File Upload Plugin in Basic Plus UI style* -->
    @Scripts.Render("~/backload/blueimp/bootstrap/BasicPlus")

    <!-- The demo application script -->
    <script src="/Scripts/demos.blueimp.basicplus.js"></script>

}

O arquivo demos.blueimp.basicplus.js contém o seguinte (adaptado e traduzido por mim):

/*jslint unparam: true */
/*global window, $ */
$(function () {
    'use strict';

    // O Backload é um produto freemium, então algumas funcionalidades são fechadas. 
    // O FileHandlerController é o controlador da sua sessão de upload.
    // No exemplo, definimos uma sessão de upload por um objectContext. 
    // Esse objectContext deve ser definido pela sua aplicação. No exemplo, 
    // foi definido com esse valor 'C5F260DD3787'. 
    var url = '/Backload/FileHandler?objectContext=C5F260DD3787';

    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator && navigator.userAgent),
        previewCrop: true,
        maxChunkSize: 10000000                                          // Opcional: tamanho de cada bloco de arquivo, em bytes, para facilitar uploads grandes.
    })
    .bind('fileuploadsubmit', function (e, data) {
        // Opcional: aqui geramos um uuid para identificar qual bloco de arquivo estamos enviando. O Backload reagrupa cada bloco de arquivo sozinho.
        data.formData = { uuid: Math.random().toString(36).substr(2, 8) };
    })

        // Aqui é a inicialização do tema Basic Plus do jQuery File Upload (https://blueimp.github.io/jQuery-File-Upload/basic-plus.html)
    .data('blueimp-fileupload').initTheme("BasicPlus");
});

Se ModelState.IsValid for true, você pode acessar o diretório do objectContext usando classes do namespace System.IO, manipular seus arquivos e depois excluir o diretório.

O local deste diretório pode ser definido pela configuração. Meus arquivos Web.Backload.config normalmente são assim:

<?xml version="1.0"?>
<backload xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:name="urn:backload-schema" xsi:noNamespaceSchemaLocation="Config\Web.Backload.xsd">
  <fileSystem filesRoot="~/Uploads/Temp" /> 
</backload>
0

Não há como recuperar arquivos em input file.

Mas existem algumas 'soluções de contorno'.
Uma das soluções é o uso da 'simulação' de Ajax.
P: Por que simulação de Ajax?
R: Simples, o Ajax não suporta envio de arquivos, então simulamos criando um iframe invisível (ou flash, ou silverlight por exemplo) que recebe uma cópia do formulário e a responsabilidade de executar o submit.

Existem diversos plugins javascript que fazem todo este trabalho por você, além de fornecer uma API padronizada, como é o caso do jQuery File upload.

Desta forma é possível manter os dados do formulário intactos, já que não houve um page reload.
Segue um pequeno exemplo de como seria usando o jQuery File upload:

$('#fileupload')
    .fileupload('send', {files: filesList})
    .success(function (result, textStatus, jqXHR) {
        console.log('Sucesso!');
        // Redireciona a página
        // ...
    })
    .error(function (jqXHR, textStatus, errorThrown) {
        console.error('Erro!');
        // trata os dados inválidos
        //...
    });

Documentação do jQuery File Upload

PS: Essa uma das soluções usada para manter retrocompatibilidade com browsers antigos, visto que o XHR2 já suporta o envio de dados binários.

2
  • 2
    Essa afirmação não é verdadeira, ok? "Ajax não suporta envio de arquivos". Ajax é o nome da técnica de usar JS para fazer requisições assíncronas. E é sim possível fazer upload de arquivos de forma assíncrona com JS. :) Commented 5/07/2016 às 8:19
  • Então, @ThiagoLunardi, você está certo. Na verdade, eu não quis ir pra esse lado mais, digamos, detalhado da coisa (falar de protocolo, diferenciar técnica de recurso, etc). Mas se você observar no final, eu até coloquei um 'PS' informando que o "XHR2" suporta o envio de binários. A minha ideia foi focar mais no resultado do que nos pormenores. De qualquer modo, é muito importante ter esse seu comentário, pode ajudar alguém a eliminar essa dúvida ;) Commented 5/07/2016 às 21:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .