Upload de arquivos com javascript

[belann 0]

Olá!

 

Estou fazendo o upload de arquivos com fetch dessa forma

fetch(url, {
        method: 'POST',
        headers: {'Content-Type': 'multipart/form-data',},
        body: formData 
    }).catch((error) => (console.log("Problemas com o Upload"), error));

 

estou usando input type=file

e criando uma const formData = new FormData(); 

mas não faz e não dá nenhum erro.

estou fazendo o upload com a url="http://localhost/dashboard/dados".

[Williams Duarte 431]

Uma coisa que notei no seu código é a definição explícita do cabeçalho 'Content-Type' como 'multipart/form-data'. Na verdade, ao fazer uploads de arquivos usando FormData, é recomendável não definir esse cabeçalho manualmente. Isso porque o navegador precisa adicionar um boundary ao tipo de conteúdo, o que é algo que ele faz automaticamente quando você omite esse cabeçalho.

 

Aqui vai uma sugestão de como você poderia ajustar o seu código:

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');
formData.append('file', fileField.files[0]);

fetch('http://localhost/dashboard/dados', {
    method: 'POST',
    body: formData 
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log('Success:', data);
})
.catch((error) => {
    console.error('Problemas com o Upload:', error);
});

Com essa abordagem, você deixa que o navegador cuide do cabeçalho Content-Type por você. Isso simplifica um pouco as coisas e pode resolver o problema que você está enfrentando.
 

Além disso, é sempre bom verificar se o servidor está configurado corretamente para aceitar uploads de arquivos e se o endpoint especificado está correto e pronto para lidar com solicitações POST multipart/form-data.

Se mesmo assim você continuar tendo problemas, uma boa dica é verificar os logs do servidor para mais detalhes sobre o que pode estar errado.
 

Espero que essa dica te ajude a resolver o problema! Se tiver mais alguma dúvida ou se algo não estiver claro, sinta-se à vontade para perguntar.

Boa sorte com o seu projeto!

[belann 0]

mas se for mais de um arquivo dá para fazer um for e juntar todos do 

input[type="file"]'

[belann 0]

9 horas atrás, Williams Duarte disse:

Uma coisa que notei no seu código é a definição explícita do cabeçalho 'Content-Type' como 'multipart/form-data'. Na verdade, ao fazer uploads de arquivos usando FormData, é recomendável não definir esse cabeçalho manualmente. Isso porque o navegador precisa adicionar um boundary ao tipo de conteúdo, o que é algo que ele faz automaticamente quando você omite esse cabeçalho.

 

Aqui vai uma sugestão de como você poderia ajustar o seu código:

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');
formData.append('file', fileField.files[0]);

fetch('http://localhost/dashboard/dados', {
    method: 'POST',
    body: formData 
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log('Success:', data);
})
.catch((error) => {
    console.error('Problemas com o Upload:', error);
});

Com essa abordagem, você deixa que o navegador cuide do cabeçalho Content-Type por você. Isso simplifica um pouco as coisas e pode resolver o problema que você está enfrentando.
 

Além disso, é sempre bom verificar se o servidor está configurado corretamente para aceitar uploads de arquivos e se o endpoint especificado está correto e pronto para lidar com solicitações POST multipart/form-data.

Se mesmo assim você continuar tendo problemas, uma boa dica é verificar os logs do servidor para mais detalhes sobre o que pode estar errado.
 

Espero que essa dica te ajude a resolver o problema! Se tiver mais alguma dúvida ou se algo não estiver claro, sinta-se à vontade para perguntar.

Boa sorte com o seu projeto!

mas se for mais de um arquivo dá para fazer um for e juntar todos do 

input[type="file"]'

[Williams Duarte 431]

A lógica é bem parecida com a de um único arquivo, só que você vai incluir mais de um arquivo no formData.

No input no seu HTML adicione o atributo multiple

<input multiple type="file">

Agora, pegue os arquivos do input.

const fileInput = document.querySelector('input[type="file"][multiple]');

 

Adicione cada arquivo ao formData

Array.from(fileInput.files).forEach((file, index) => {
    // Aqui, 'files[]' é o nome do campo que será usado pelo servidor para receber os arquivos.
    // O uso de '[]' indica que é um array de arquivos. O nome exato depende da API do servidor.
    formData.append('files[]', file);
});

O restante é praticamente igual!

Fóruns exigem esforço próprio; não esperem soluções prontas. Pesquise para aproveitar bem.

[belann 0]

7 horas atrás, Williams Duarte disse:

A lógica é bem parecida com a de um único arquivo, só que você vai incluir mais de um arquivo no formData.

No input no seu HTML adicione o atributo multiple

<input multiple type="file">

Agora, pegue os arquivos do input.

const fileInput = document.querySelector('input[type="file"][multiple]');

 

Adicione cada arquivo ao formData

Array.from(fileInput.files).forEach((file, index) => {
    // Aqui, 'files[]' é o nome do campo que será usado pelo servidor para receber os arquivos.
    // O uso de '[]' indica que é um array de arquivos. O nome exato depende da API do servidor.
    formData.append('files[]', file);
});

O restante é praticamente igual!

Fóruns exigem esforço próprio; não esperem soluções prontas. Pesquise para aproveitar bem.

só está dando o seguinte erro: Problemas com o Upload: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON não consegui achar o problema

[Williams Duarte 431]

2 horas atrás, belann disse:

só está dando o seguinte erro: Problemas com o Upload: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON não consegui achar o problema

O erro "Unexpected token ... sugere que o seu código esperava JSON, mas recebeu HTML, provavelmente de uma página de erro (como 404 ou 500). Isso ocorre ao tentar converter a resposta do servidor em JSON quando a URL está errada ou o servidor não responde corretamente. Verifique a URL e as configurações do servidor para garantir que aceitam uploads POST e retornam JSON.
 

fetch('http://localhost/dashboard/dados', {
    method: 'POST',
    body: formData
})
.then(response => {
    if (!response.ok) {
        throw new Error('Houve um problema com a resposta da rede');
    }
    // Verifica se a resposta é JSON antes de tentar converter
    const contentType = response.headers.get('content-type');
    if (contentType && contentType.includes('application/json')) {
        return response.json();
    } else {
        throw new Error('Não é JSON: ' + contentType);
    }
})
.then(data => {
    console.log('Sucesso:', data);
})
.catch(error => {
    console.error('Problemas com o Upload:', error);
});

 

Entenda, quando você faz o upload de arquivos para um servidor usando PHP ou Node.js, a resposta esperada geralmente depende de como você configurou o servidor para lidar com o upload e o que você precisa fazer com os arquivos após recebê-los. Abaixo estão exemplos de respostas que você pode esperar de cada um:

Exemplo de Resposta do PHP:

<?php
// Processamento do upload...
// Supondo que tudo correu bem
$response = [
    'success' => true,
    'message' => 'Upload realizado com sucesso!',
    'fileInfo' => [
        'name' => $_FILES['file']['name'],
        'size' => $_FILES['file']['size'],
        'type' => $_FILES['file']['type'],
    ]
];

header('Content-Type: application/json');
echo json_encode($response);

Exemplo de Resposta do Node.js com Express:

app.post('/upload', upload.single('file'), (req, res) => {
    // Processamento do upload...
    // Supondo que tudo correu bem
    res.json({
        success: true,
        message: 'Upload realizado com sucesso!',
        fileInfo: {
            name: req.file.originalname,
            size: req.file.size,
            type: req.file.mimetype,
        }
    });
});

Obs.: Diferentes frameworks têm a capacidade de ajustar automaticamente seus comportamentos com base nos cabeçalhos HTTP recebidos, o que significa que não existe uma única abordagem padrão aplicável a todos os casos.

[belann 0]

21 horas atrás, Williams Duarte disse:

O erro "Unexpected token ... sugere que o seu código esperava JSON, mas recebeu HTML, provavelmente de uma página de erro (como 404 ou 500). Isso ocorre ao tentar converter a resposta do servidor em JSON quando a URL está errada ou o servidor não responde corretamente. Verifique a URL e as configurações do servidor para garantir que aceitam uploads POST e retornam JSON.
 

fetch('http://localhost/dashboard/dados', {
    method: 'POST',
    body: formData
})
.then(response => {
    if (!response.ok) {
        throw new Error('Houve um problema com a resposta da rede');
    }
    // Verifica se a resposta é JSON antes de tentar converter
    const contentType = response.headers.get('content-type');
    if (contentType && contentType.includes('application/json')) {
        return response.json();
    } else {
        throw new Error('Não é JSON: ' + contentType);
    }
})
.then(data => {
    console.log('Sucesso:', data);
})
.catch(error => {
    console.error('Problemas com o Upload:', error);
});

 

Entenda, quando você faz o upload de arquivos para um servidor usando PHP ou Node.js, a resposta esperada geralmente depende de como você configurou o servidor para lidar com o upload e o que você precisa fazer com os arquivos após recebê-los. Abaixo estão exemplos de respostas que você pode esperar de cada um:

Exemplo de Resposta do PHP:

<?php
// Processamento do upload...
// Supondo que tudo correu bem
$response = [
    'success' => true,
    'message' => 'Upload realizado com sucesso!',
    'fileInfo' => [
        'name' => $_FILES['file']['name'],
        'size' => $_FILES['file']['size'],
        'type' => $_FILES['file']['type'],
    ]
];

header('Content-Type: application/json');
echo json_encode($response);

Exemplo de Resposta do Node.js com Express:

app.post('/upload', upload.single('file'), (req, res) => {
    // Processamento do upload...
    // Supondo que tudo correu bem
    res.json({
        success: true,
        message: 'Upload realizado com sucesso!',
        fileInfo: {
            name: req.file.originalname,
            size: req.file.size,
            type: req.file.mimetype,
        }
    });
});

Obs.: Diferentes frameworks têm a capacidade de ajustar automaticamente seus comportamentos com base nos cabeçalhos HTTP recebidos, o que significa que não existe uma única abordagem padrão aplicável a todos os casos.

Eu fiz deu essa mensagem: Upload: Error: Não é JSON: text/html;charset=UTF-8
    

[Williams Duarte 431]

Em 17/02/2024 at 19:24, belann disse:

Eu fiz deu essa mensagem: Upload: Error: Não é JSON: text/html;charset=UTF-8
    

O problema está no retorno, não no script js, é como eu disse antes:

" resposta esperada geralmente depende de como você configurou o servidor para lidar com o upload"