[RESOLVIDO] Como atribuir um documento para um input file via javascript?

Front-end
,
#1

Bom pessoal, estou com um dilema aparentemente fácil de resolver, tenho uma aplicação que faz upload de imagem, e antes de fazer o upload estou recortando a imagem, quando eu recorto a imagem a imagem gera um canvas, eu transformo o canvas em blob com a function .toBlob(), e depois atribuo ele a um var formData = new FormData();, so que ai que esta problema, o meu backand que faz o upload só aceita dados vindos de um form enctype=“multipart/form-data”, ai que surgiu minha primeira ideia que e a seguinte: Eu pegar o meu blob ou o canvas e coloca-lo em um input file dentro de um form enctype=“multipart/form-data” e da um submit no form, so que eu não sei como atribuir um arquivo ao input file, alguem pode me ajudar com isso?

#2

A questão não é vc atribuir, mas sim o navegador aceitar… campos file são controlados pelo navegador, manipular o atributo src (nesse caso para escrita) do campo em navegadores modernos pode gerar erro por eles não deixarem (questões de segurança, etc), na duvida tente…

var imagem = document.getElementById('id_do_input');
imagem.src = imagem;

Faça isso com o console de erros aberto (F12, aba console) para debugar…

Obs: não mexi ainda com blob, etc, pesquise mais a respeito para tentar implementar a forma correta…

Obs2: não seria mais prático, deixar o controle de recortar a imagem direto no servidor? Assim vc envia a imagem “crua” usa o submit simples pelo enctype etc sem problemas, o servidor recorta e salva a imagem a seu gosto?

#3

E que eu coloquei um mecanismo onde a pessoa escolhe o que quer recortar, e delimitei o tamanho, pq se eu colocar na parte do serve o usuário não vai ter controle do que quer salvar entende?

#4

muito obrigado brother, a dica que vc me deu ai atendeu a minha nescidade, so fiz uma modificação,
lembra do canvas que lhes falei? coloquei uma variavel pra pegar o input e atribui no input.src a url do canvas ficou assim

var formData = document.getElementById(‘input’);
formData.src = canvas.toDataURL();

vlw brother

1 curtida
#5

Agora entendi, há uma regra de negócio por trás…

Funfo certin? :joy:, segue outro jeito de fazer se precisar enviar por ajax com jquery por exemplo…

var form = $("#form-cadastro");
var formData = new FormData(form[0]);

$.ajax({
    url: "server.php",
    type: "POST",
    data: formData,
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function(json) {
        console.log(json);
    }
});

Lembrando que seu form (form[0] nesse exemplo) precisa ter enctype tudo certinho normal, blz?

Só precisa ter cuidado com navegadores antigos… sucesso irmão!

1 curtida
#6

Funcionou em partes, ta enviando, mas a api de upload não ta aceitando o tipo de data mandado pelo ajax, meu backand ta em node.js e a api e a multer, e ela so aceita form no formato bruto, vou ver na documentação da api se da pra mandar o form bruto via ajax pois queria implementar uma barra de progresso.

#7

Questão de estudar, apenas indiquei como outra forma de implementação, boa sorte!

1 curtida
#8

Vlw pela ajuda, muito obrigado pela atenção, acho que consigo daqui pra frente vlw :slight_smile:

1 curtida
#9

Conseguindo uma solução se puder posta pra gente ver, outras pessoas podem ter a mesma duvida, etc…

1 curtida
#10

a solução ficou a seguinte,

// a variavel canvas e a imagem ja cortada com a api cropper.js.
var input_file = document.getElementById(‘input’);//input do tipo file dentro do form
input_file.src = canvas.toDataURL(); //nessa parte o form abaixo recebe a imagem ja cortada.

e o form com input ficou o seguinte

’<‘form action="/file" id=“form_pf” method=“post” enctype=“multipart/form-data”>
’<‘input type=“file” class=“sr-only” id=“input” name=“image” accept=“image/*”>
’<‘button type=“button” class=“btn btn-primary” type=“submit”>enviar
’<’/form>

obs(tire as apas do inicio das tag html do form)

1 curtida
#11

Show!, apenas uma pequena obs:

Seu button enviar possui dois types (button e submit) é melhor definir apenas um tipo, se precisar validar seu html no futuro (https://validator.w3.org/) a validação pode acusar esse ponto, lembrando que por padrão uma tag button tem type=“submit” se não especificado…

No mais, sucesso!