app shows server directory on phone, static folder is empty
press upload icon
browse for files, select expo-location
upload starts
upload finishes
open static folder again, file is uploaded
upload another file
open folder on server, verify files are uploaded
//cmd - server logs
index get
index post
upload post
Uploaded File: expo-location-6a2380c18118466d88e1dbb510e776b9-signed.apk File Size: 51880840 MIME Header: map[Content-Disposition:[form-data; name="myFile"; filename="expo-location-6a2380c18118466d88e1dbb510e776b9-signed.apk"] Content-Type:[application/vnd.android.package-archive]]
index post
index post
upload post
request Content-Type isn't multipart/form-data
upload post
Uploaded File: expo-forex-771bec8df58843c3a1974f3d932afa85-signed.apk File Size: 53496647 MIME Header: map[Content-Disposition:[form-data; name="myFile"; filename="expo-forex-771bec8df58843c3a1974f3d932afa85-signed.apk"] Content-Type:[application/vnd.android.package-archive]]
index post
func uploadPostHandler(w http.ResponseWriter, r *http.Request) {
fmt.Println("upload post")
w.Header().Set("Content-Type", "application/x-msdownload")
w.Header().Set("Access-Control-Allow-Origin", "*")
w.WriteHeader(http.StatusCreated)
r.ParseMultipartForm(1000)
file, handler, err := r.FormFile("myFile")
if err != nil {
fmt.Println(err)
return
}
defer file.Close()
fmt.Printf("Uploaded File: %+v ", handler.Filename)
fmt.Printf("File Size: %+v ", handler.Size)
fmt.Printf("MIME Header: %+v\n", handler.Header)
path := rootDir() + "\\golang12\\static\\" + handler.Filename
resFile, err := os.Create(path)
if err != nil {
fmt.Println(err)
return
}
defer resFile.Close()
io.Copy(resFile, file)
json.NewEncoder(w).Encode("ok")
}
---------------------------
//folderDisplay.js
import React, { useState } from 'react';
import { folder, folderOpenOutline, documentOutline, cloudUploadOutline, cloudDownloadOutline } from 'ionicons/icons';
import { IonIcon } from '@ionic/react';
import axios from 'axios'
import '../pages/Home.css'
import saveAs from 'file-saver';
const qs = require('querystring')
export default function FolderDisplay(props) {
const [open, setOpen] = useState(false)
const [subDir, setSubDir] = useState([])
const [showLoad, setShowLoad] = useState(false)
const [downlaodProgress, setDownloadProgress] = useState(0)
const [uploadProgress, setUploadProgress] = useState(0)
function post_dir(d) {
axios({
method: 'post',
url: 'http://192.168.0.18:8000/',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: qs.stringify({ dir: d })
})
.then(response => {
setSubDir(response.data)
})
.catch(function (error) {
alert(error);
});
}
function download_dir(d, name) {
axios({
method: 'post',
url: 'http://192.168.0.18:8000/download/',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: qs.stringify({ dir: d }),
responseType: 'blob', // important
onDownloadProgress: progressEvent => {
const p = parseInt(progressEvent.loaded / props.size * 100);
setDownloadProgress(p)
},
})
.then(response => {
console.log(response)
saveAs(response.data, name);
})
.catch(function (error) {
alert(error);
});
}
function clickEvent() {
setShowLoad(!showLoad)
if (!props.isDir) { return }
if (!open) {
post_dir(props.dir)
}
setOpen(!open)
}
function downloadEvent() {
download_dir(props.dir, props.name)
}
function uploadEvent() {
const inputId = "fileInput" + props.dir
console.log(inputId)
//open file browser
document.getElementById(inputId).click()
}
function fileChange() {
const inputId = "fileInput" + props.dir
const file = document.getElementById(inputId).files[0]
let formdata = new FormData();
formdata.append("myFile", file);
axios({
method: 'post',
url: 'http://192.168.0.18:8000/upload/',
data: formdata,
onUploadProgress: progressEvent => {
const p = parseInt(progressEvent.loaded / progressEvent.total * 99);
setUploadProgress(p)
},
})
.then(res => {
console.log(res.data);
if (res.data === 'ok') {
setUploadProgress(100)
}
})
.catch((err) => {
console.log(err)
})
}
const folder_icon = open ? <IonIcon icon={folderOpenOutline} /> : <IonIcon icon={folder} />
const sub_folder_list = subDir.map((item, index) => {
const dir_split = item.Name.split("\\")
const folder_name = dir_split[dir_split.length - 1].replace(props.name, '')
const dir_name = item.Name.replace(folder_name, '') + '\\' + folder_name
return <li key={dir_name}>
<FolderDisplay name={folder_name} dir={dir_name} isDir={item.IsDir} size={item.Size} key={item.Name} />
</li>
})
return (
<li >
<span onClick={() => clickEvent()}>
{props.isDir ? folder_icon : <IonIcon icon={documentOutline} />}{' '}
{props.name}{' '}
{showLoad && props.isDir ? <IonIcon icon={cloudUploadOutline} onClick={() => uploadEvent()} /> : null}{' '}
{showLoad && !props.isDir ? <IonIcon icon={cloudDownloadOutline} onClick={() => downloadEvent()} /> : null}{' '}
{downlaodProgress != 0 ? downlaodProgress + '%' : null}
{uploadProgress != 0 ? uploadProgress + '%' : null}
<input type="file" id={"fileInput" + props.dir} style={{ display: "none" }} onChange={() => fileChange()}></input>
</span>
{open ? <ul className="no-bullets">
{sub_folder_list}
</ul> : null}
</li>
);
};
reference:
upload file to go server
go axios request Content-Type isn't multipart/form-data
axios upload download progress
No comments:
Post a Comment