How do i send/receive files with pure JS?

[sweetiepeh1]

ok so I was making a cloud thing but I was confused "how do I upload and download files with JS?" I was looking on google, but none of them worked in the snap editor. can anyone help me?

[silver_star]

There are blocks to do this in
https://snap.berkeley.edu/snap/snap.html#present:Username=silver_star&ProjectName=Sound%20and%20costume%20tools&editMode&noRun

[ego-lay_atman-bay]

when they say "upload files" I think they mean, "upload them to an external server". Also, you could just link them to the File import library instead of your custom blocks project.

[sweetiepeh1]

@ego-lay_atman-bay

I think they mean, "upload them to an external server"

yes i meant that
is there any external servers that i can send stuff to?

[helicoptur]

make your own with replit or something

[programmer_user]

https://transfer.sh, but uploads only stay up for 14 days

[ego-lay_atman-bay]

but how do you do it with javascript?

[pumpkinhead]

to get files you can use fetch

fetch("https://www.example.com/")
  .then(response => response.json())
  .then(data => console.log(data));

to send files you can probably send a POST or PUT request using an XMLHttpRequest
i say "probably" because i think it is up to the server to decide what happens on a POST or PUT request

var req = new XMLHttpRequest();

req.open("POST", "https://www.example.com/");
req.send(data);

[programmer_user]

You can also send POST or PUT requests with fetch

[snapenilk]

@programmer_user

fetch

pumpkinhead already mentioned that.

[silver_star]

@ego-lay_atman-bay

Also, you could just link them to the File import library instead of your custom blocks project.

I didn't have that link

[coder2195snap]

Upload

Upload:
upload is easy, use:

let i = document.createElement("input")
i.type = "file"
// when clicked
i.click()
//use a filereader api to read the file
let fr = new FileReader()
//etc
// https://developer.mozilla.org/en-US/docs/Web/API/FileReader for filereader

Download

download is harder,
You gotta make a Blob object and attach it onto a <a> tag
Blob - Web APIs | MDN for more details

[ego-lay_atman-bay]

I didn't either. I just searched on the forum, "file import" and in the results was "File import library".

[helicoptur]

@coder2195snap

download is harder,

No, download is loads easier.
Take a look:

var lnk = document.createElement('a');
lnk.href = (URL||webkitURL).createObjectURL(new Blob([contents])); // assuming contents is a var with the contents
lnk.download = 'test.jpg'; // name + . + extension
lnk.click()

[sweetiepeh1]

@pumpkinhead

fetch

with the block in the

@ego-lay_atman-bay

File import library

with all website except snap.berkeley.edu it just reports nothing

[sweetiepeh1]

@pumpkinhead

var req = new XMLHttpRequest();

req.open("POST", "https://www.example.com/");
req.send(data);

im trying to use it in snap
edit: i will try again

[sweetiepeh1]

@coder2195snap

let i = document.createElement("input")
i.type = "file"
// when clicked
i.click()
//use a filereader api to read the file
let fr = new FileReader()
//etc
// https://developer.mozilla.org/en-US/docs/Web/API/FileReader for filereader

im trying to use it in snap

[sweetiepeh1]

@helicoptur

var lnk = document.createElement('a');
lnk.href = (URL||webkitURL).createObjectURL(new Blob([contents])); // assuming contents is a var with the contents
lnk.download = 'test.jpg'; // name + . + extension
lnk.click()

[sweetiepeh1]

test
wait button tag does not work?

[snapenilk]

@pumpkinhead

data

You need to define a variable or function parameter called data and assign to it the data you want to send.

---

@helicoptur

contents

Same thing (

@helicoptur

assuming contents is a var with the contents

)

---

@sweetiepeh1

test

Only a subset of HTML can be used on the forum (i.e. iframe for Snap! projects and text-formatting ones like p, h1-h6, b, i, strike, em, etc. [maybe more?])