Как отправить файл загрузки из элемента HTML (Wix) - PullRequest
Новая
       41

Как отправить файл загрузки из элемента HTML (Wix)

0 голосов
/ 04 августа 2020

Моя проблема немного сложна, поэтому я постараюсь объяснить ее в меру своих возможностей (я дислекси c извините, если это не имеет смысла)

Я использую wix для сборки веб-сайт, но я пишу все JavaScript сам. Я использую AWS s3 для хранения всех загруженных пользователем изображений, документов, видео и аудио файлов. Загрузка в s3 работает хорошо, но я не могу связать загрузку на веб-сайт с загрузкой в ​​s3.

На данный момент у меня есть элемент HTML, в котором есть кнопка загрузки файла; Я хочу, чтобы эта кнопка отправляла выбранный файл на wix JavaScript, который может отправить его в модуль s3, который загрузит его в корзину s s3. Возможно ли это?

У меня есть элемент HTML, код которого по умолчанию: 

<!doctype html>

<html>

<head>

<script type="text/javascript">

window.onmessage = (event) => {

if (event.data) {

document.getElementById("GoogleSheetsDocs").innerHTML = event.data;

}

};

function sendLoadMessage () {

window.parent.postMessage("LoadOk1", "*");

}
function postMsg(msg) {
   window.parent.postMessage(msg, "*");
}
function myFunction() {
    var x = document.getElementById("myFile");
    postMsg(x)
}
</script>

</head>

<body onload="sendLoadMessage ();" style="background-color:white;">

<div id="GoogleSheetsDocs"></div>

</body>

</html>

Когда элемент HTML загружен, он отправляет сообщение, подтверждающее это с помощью функция sendLoadMessage (). Затем JavaScript в wix отправляет следующий код для отображения в элементе:

Введите HTML код: 

<!DOCTYPE html>
<html>
<body>
Select a file to upload:
<input type="file" id="myFile" size="50">
<button type="button" onclick="myFunction()">Upload</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myFile");
    postMsg(x)
}
</script>
</body>
</html>

JavaScript Код: 

$w("#html1").postMessage('<!DOCTYPE html><html><body>Select a file to upload:<input type="file" id="myFile" size="50"><button type="button" onclick="myFunction()">Upload</button><p id="demo"></p><script>function myFunction() {var x = document.getElementById("myFile");postMsg(x)}</script></body></html>')

Я ожидал, что это выведет загруженный файл из элемента HTML в JavaScript в wix, который затем будет отправлен в модуль загрузки: 

  $w("#html1").onMessage( (event) => {
    console.log("Here")
    let receivedMessage = event.data;
    console.log("receivedMessage", receivedMessage)
    if (receivedMessage === "LoadOk1") {
      console.log("LoadIn")
      $w("#html1").postMessage('<!DOCTYPE html><html><body>Select a file to upload:<input type="file" id="myFile" size="50"><button type="button" onclick="myFunction()">Upload</button><p id="demo"></p><script>function myFunction() {var x = document.getElementById("myFile");postMsg(x)}</script></body></html>')
    } else {
      console.log("Else")
      SendtoModule(receivedMessage)
    } // End of if
  } ); // End of html1

Кнопка загрузки работает, но кнопка отправки не вызывает сообщение JavaScript.

Для того, чтобы файл был загружен в корзину s3, он должен быть строкой, буфером, потоком, Blob или объектом типизированного массива . Я надеюсь, что загрузка файлов HTML для изображений, видео, аудио и документов является одним из этих типов?

Кто-нибудь знает, как отправить загруженный файл из элемента HTML в JavaScript так его можно отправить в модуль и загрузить в s3? Альтернативный способ загрузки файла на сайт был бы отличным; Я не думаю, что загрузка файла wix позволяет передать загрузку в модуль?

...