Added: upload image in beer add form

This commit is contained in:
Filip Rojek 2024-05-14 22:19:08 +02:00
parent 4fe4808b3c
commit 82c90c1ceb
3 changed files with 46 additions and 19 deletions

1
api/.gitignore vendored
View File

@ -3,3 +3,4 @@ dist/
package-lock.json package-lock.json
.env .env
test-report.html test-report.html
uploads/

View File

@ -36,6 +36,7 @@ app.use(morgan("dev"));
app.use(express.urlencoded({ extended: true })); app.use(express.urlencoded({ extended: true }));
app.use(express.json()); app.use(express.json());
app.use(express.static(path.join(__dirname, "public"))); app.use(express.static(path.join(__dirname, "public")));
app.use('/public/uploads', express.static(path.join(__dirname, '../uploads')));
app.use(cookieParser()); app.use(cookieParser());
// Routes // Routes

View File

@ -49,7 +49,7 @@ export default function BeerAdd() {
console.log(result); console.log(result);
if (!result.canceled) { if (!result.canceled) {
setImage(result.assets[0].uri); setImage(result.assets[0]);
} }
}; };
@ -68,7 +68,7 @@ export default function BeerAdd() {
console.log(result); console.log(result);
if (!result.canceled) { if (!result.canceled) {
setImage(result.assets[0].uri); setImage(result.assets[0]);
} }
}; };
@ -87,29 +87,54 @@ export default function BeerAdd() {
} }
} }
} }
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(",")[0].indexOf("base64") >= 0)
byteString = atob(dataURI.split(",")[1]);
else byteString = unescape(dataURI.split(",")[1]);
// separate out the mime component
var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
}
async function addBeer() { async function addBeer() {
// TODO: after the request - redirect to /beer/{new_beer_id}?; plus some modal about successful state // TODO: after the request - redirect to /beer/{new_beer_id}?; plus some modal about successful state
const req = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/beer/add`, { const data = new FormData();
method: "POST", data.append("photos", dataURItoBlob(image.uri));
credentials: "include", data.append("brand", b_brand);
headers: { "Content-Type": "application/json" }, data.append("name", b_name);
body: JSON.stringify({ data.append("degree", b_degree);
brand: b_brand, data.append("packaging", "can");
name: b_name,
degree: b_degree,
packaging: b_packaging,
photos: null,
}),
});
const res = await req.json();
if (res.code == 201 && res.data._id) { try {
window.location.href = `/beer/${res.data._id}`; const req = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/beer/add`, {
} else { method: "POST",
credentials: "include",
body: data,
});
const res = await req.json();
if (res.code == 201 && res.data._id) {
window.location.href = `/beer/${res.data._id}`;
} else {
alert(
"Beer was not added successfully. Please check your data and try again.",
);
}
} catch (err) {
alert( alert(
"Beer was not added successfully. Please check your data and try again.", "Beer was not added successfully. Please check your data and try again.",
); );
console.error(err);
} }
} }
@ -169,7 +194,7 @@ export default function BeerAdd() {
textStyle={styles.imageTextButton} textStyle={styles.imageTextButton}
/> />
</View> </View>
{image && <Image source={{ uri: image }} style={styles.image} />} {image && <Image source={{ uri: image.uri }} style={styles.image} />}
<Button title="Add beer" color={colors.gold} onPress={addBeer} /> <Button title="Add beer" color={colors.gold} onPress={addBeer} />
</View> </View>
</View> </View>