Olá @Matheus Alexandre tudo bem?
Eu estou enfrentando alguns problemas com a media gallery. Ao enviar uma imagem para a galeria, o que vai para ela é a imagem do link do código e não a imagem enviada pelo usuário. Qual seria o problema?
já agradeço pela ajuda, boa tarde!
Esse é o código que estou usando.
import wixData from 'wix-data';
$w.onReady(function () {
let obj = {
"media": [
{
type: "image",
"alt": "teste alt",
"title": "teste de título",
"description": "a teste descripiton",
src:"https://static.wixstatic.com/media/dcdd1b_0abe81b5bb444063aacfc5d0ca18d97a~mv2.png"
},
]
}
wixData.insert("Media_gallery", obj)
.the((i) => {
console.log(i)
})
.catch((err) => {
console.log(err)
})
});
let imagens = []
async function adicionarImagens() {
let arquivo = $w("#uploadimg").value[0]
}
export function uploadimg_change(event) {
adicionarImagens()
}
export async function button2_click(event) {
let arrayParaGravar = []
await ((valor, i) => {
arrayParaGravar.push({
type: "image",
src: valor.src
})
})
}
Exemplo de Upload
Vamos criar um formulário simples que carrega uma imagem para entender melhor como esse processo funciona. Adicionaremos elementos a uma página, conectaremos alguns elementos a um pouco de código e testaremos o formulário.
Pré-requisitos
Antes de criar um formulário de upload, você precisará se sentir um pouco confortável com o código JavaScript, especialmente os manipuladores de eventos e as promessas.
Adicionar elementos da página
Adicione os seguintes elementos à página:
Um botão de upload para escolher um arquivo. Os botões de upload são encontrados na seção Entrada do usuário do menu Adicionar .
Um botão regular para acionar o código de upload.
Um elemento de texto para exibir mensagens para o visitante do site.
Um elemento de imagem. Qualquer imagem está boa. Estamos apenas usando-o como um espaço reservado para a imagem carregada.
Sinta-se livre para alterar o design e o texto de qualquer um dos elementos que acabamos de adicionar. O formulário completo deve ser algo como isto:
Código de upload
O botão de upload cuida do visitante do site escolhendo o arquivo para nós. Mas precisamos conectar o código ao botão regular para realizar o upload real.
Começaremos adicionando um manipulador de eventos onClick para o botão.
Em seguida, adicionaremos o código que realiza o upload. No manipulador de eventos onClick, adicione o seguinte código para que a função completa seja a seguinte:
export function button1_click(event) { if ($w("#uploadButton1").value.length > 0) { $w("#text1").text = "Uploading " + $w("#uploadButton1").value[0].name }; $w("#uploadButton1").startUpload() .then((uploadedFile) => { $w("#text1").text = "Upload successful"; //aqui vc tem a url da sua imagem //e pode salvar no banco dedados $w("#image1").src = uploadedFile.url; }) .catch((uploadError) => { $w("#text1").text = "File upload error"; console.log("File upload error: " + uploadError.errorCode); console.log(uploadError.errorDescription); }); } else { $w("#text1").text = "Please choose a file to upload."; }Vamos dar uma olhada neste código, pedaço por pedaço, para entender o que está fazendo.
Primeiro, na linha 2, verificamos se o visitante do site escolheu um arquivo. Não especificamos um tipo de arquivo, portanto, "imagem" é assumido.
if($w("#uploadButton1").value.length > 0) {A value propriedade do botão de upload retorna uma matriz de File objetos, cada um representando um arquivo que o visitante do site optou por enviar. Portanto, verificamos length se esse array tem pelo menos um item, o que significa que o visitante do site escolheu pelo menos um arquivo.
Se a matriz retornada por value estiver vazia, passamos para o else linhas 15 a 17 para exibir uma mensagem para o visitante do site no elemento de texto.
else { $w("#text1").text = "Please choose a file to upload."; }Isso termina a tentativa de upload. O visitante do site pode escolher um arquivo e iniciar o upload novamente.
Se a matriz tiver um File elemento, o que significa que o visitante do site escolheu um arquivo para carregar, continuamos com o processo de upload.
Na linha 3, iniciamos o processo de upload exibindo uma mensagem para o visitante do site informando que estamos carregando o arquivo escolhido.
$w("#text1").text = "Uploading " + $w("#uploadButton1").value[0].name};Em seguida, na linha 4, chamamos a startUpload() função do botão de upload, que realiza o upload real.
$w("#uploadButton1").startUpload()Ele retorna uma promessa que resolve para um UploadedFile objeto com informações sobre o arquivo carregado se o upload foi bem-sucedido ou rejeita um UploadError objeto com informações sobre o erro que ocorreu se o upload não foi bem-sucedido.
Se o upload for bem-sucedido, a Promessa continuará then()nas linhas 5-8.
.then( (uploadedFile) => { $w("#text1").text = "Upload successful"; $w("#image1").src = uploadedFile.url; })Aqui, exibimos uma mensagem ao visitante do site informando que o upload foi bem-sucedido e a imagem carregada. Exibimos a imagem obtendo a url propriedade de uploadedFile, que retorna a URL Wix onde o arquivo carregado está armazenado.
Se o upload não for bem-sucedido, a Promessa rejeitará catch()nas linhas 9 a 13.
.catch( (uploadError) => { $w("#text1").text = "File upload error"; console.log("File upload error: " + uploadError.errorCode); console.log(uploadError.errorDescription); });Aqui, exibimos uma mensagem para o visitante do site dizendo que o upload não foi bem-sucedido.Também registramos as informações de erro do uploadError objeto usando suas propriedades errorCodeeerrorDescription.
Espero ter ajudado!
Oi @Matheus Alexandre tudo bem?
Matheus, eu estou utilizando um botão conectado há um dataset com a função enviar, um botão de upload e uma imagem para o usuário pre-visualizar a imagem carregada por ele antes de enviar para a coleção. Neste caso o fluxo desejado é:
1- O usuário escolhe uma imagem ao clicar no botão upload.
2- A imagem selecionada por ele é mostrada no lugar da imagem padrão.
3- Ao clicar em enviar, a imagem é enviada diretamente para o campo "media gallery" na coleção.
Quando eu visualizo e testo a função, a imagem aparece como transparente na coleção.
Imagem da página em que eu estou fazendo os testes da função antes de publicar no site.
Como aparece a imagem na coleção
Oi @gus
Seu código parece não está completo, de acordo com a comportamento desejado. Explique mais sobre o fluxo que você precisa implementar.