I have an Ionic app built with angular. I have integrated Imgly in my app. But it is not working properly. After editing an image the plugin is not exporting that image. I have looked into many documentation's but haven't found any solution on this.
Method capturing image and opening Imgly plugin
captureImage2() {
if (this.usepicker) {
this.filePickerRef.nativeElement;
// this.filePickerRef.nativeElement.click();
// return;
}
const options: CaptureImageOptions = { limit: 1 };
this.mediaCapture.captureImage(options).then(
async (data: MediaFile[]) => {
const fullPath = data[0].fullPath;
const directoryPath = fullPath.substring(0, fullPath.lastIndexOf("/"));
const fileName = fullPath.substring(fullPath.lastIndexOf("/") + 1);
console.log(
"File Details ======>>>>>>",
fullPath,
directoryPath,
fileName
);
PESDK.openEditor(
async (data1) => {
console.log("REEEEEE =====> ", JSON.stringify(data1));
await this.toProcessImage(data1.image);
const check = await this.displayImage(data1.image);
// console.log(check);
this.onButtonClick(data1.image);
// const dataURL = await this.file.readAsDataURL(data1.image, fileName);
// console.log("DATA URL ======>>>>>>" + dataURL);
data1
.save()
.then(async (sceneAsString) => {
const file = {
dataURI: sceneAsString,
directory: this.dic,
};
const fileResponse = await UriFileUpload(file);
if (fileResponse) {
console.log("image UPLOADED", JSON.stringify(fileResponse));
this.toastSer.success("uploaded");
// this.uploadedList = [...this.uploadedList , fileResponse1];
// console.log(this.uploadedList);
this.updateFiles.next(fileResponse);
} else {
this.toastSer.error("Somthing went wrong!");
}
})
.catch((error) => {
console.error("Save failed", error);
});
},
(error) => console.log(error),
fullPath
);
},
(err: CaptureError) => console.error(err)
);
}
IMG.LY team here!
We would like to provide a correct answer, but keep in mind that for this type of issue, a minimal example project is required in order to test what the different outputs are from the used camera and image picker plugin.
You can find Stack Overflow's suggestions here for a minimal project.
Feel free to submit your further queries to our Support Desk, we're always happy to help.
Related
In product page, I want to get all images path that are in a specific folder and send those to client side, so I can use them in client side by passing the paths to Image component of next js. I tried this when I was developing my app via running npm run dev and it was successful. Then I pushed the changes to my GitHub repository and vercel built my app again. Now, when I go to the product page, I get an error from the server. I tried some ways to fix this problem, but I couldn't fix that. For example, I tried changing my entered path in readdir, but the problem didn't fix. Here are my codes:
const getPagePhotosAndReview = async (productName) => {
const root = process.cwd();
let notFound = false;
const allDatas = await fs
.readdir(root + `/public/about-${productName}`, { encoding: "utf8" })
.then((files) => {
const allDatas = { pageImages: [], review: null };
files.forEach((value) => {
const image = value.split(".")[0];
const imageInfos = {
src: `/about-${productName}/${value}`,
alt: productName,
};
if (Number(image)) {
allDatas.pageImages.push(imageInfos);
}
});
return allDatas;
})
.catch((reason) => (notFound = true));
if (notFound) return 404;
await fs
.readFile(root + `/public/about-${productName}/review.txt`, {
encoding: "utf-8",
})
.then((value) => {
allDatas.review = value;
})
.catch((reason) => {
allDatas.review = null;
});
return allDatas;
};
export async function getServerSideProps(context) {
if (context.params.product.length > 3) {
return { notFound: true };
}
if (context.params.product.length < 3) {
const filters = {
kinds: originKinds[context.params.product[0]] || " ",
};
if (context.params.product[1]) filters.brands = context.params.product[1];
const products = getFilteredProducts(filters, true);
if (products.datas.length === 0) {
return {
notFound: true,
};
}
return {
props: {
products: { ...products },
},
};
}
if (context.params.product.length === 3) {
const filters = {
path: context.resolvedUrl,
};
const product = getFilteredProducts(filters, false);
if (product.length === 0) {
return {
notFound: true,
};
}
const splitedPath = product[0].path.split("/");
const pagePhotosAndReview = await getPagePhotosAndReview(
splitedPath[splitedPath.length - 1]
);
if (pagePhotosAndReview === 404) return { notFound: true };
product[0] = {
...product[0],
...pagePhotosAndReview,
};
product[0].addressArray = [
textOfPaths[context.params.product[0]],
textOfPaths[context.params.product[1]],
];
return {
props: {
product: product[0],
},
};
}
}
This is the base code and I tried some ways but couldn't fix the problem. So to fix this problem, I want to ask: how can I get the name of all images in a specific directory and then use those images in client side? And errors that I get: if I go to a page directly and without going to the home of the website, I get internal server error with code of 500 and when I go to a page of my website, and then I go to my product page, I get
Application error: a client-side exception has occurred (see the browser console for more information).
And I should say that I know I should remove public from paths when I want to load an image from public folder. I did it but I still get error.
I have built NFT staking website and it is working properly except that I forced to show the image update when staking or unstaking. That is because immediate update of image cannot be done with moralis getnftforcontract api and opensea api. The code is following.
const get_balanceUrls = async () => {
await Moralis.Web3API.initialize({ apiKey: WEB3APIKEY });
const options = { chain: CHAINETHID, address: walletAddress, token_address: G_ADDRESS, };
let ownedNFTs = await Moralis.Web3API.account.getNFTsForContract(options);
console.log("owning NFTS", ownedNFTs.result);
let stakedNFTs = Object.values(balanceofstakes);
if(ownedNFTs.result.length == 0 && nft_unstakeBalance.length == 0) {
setBalanceImageUrl([]);
return;
}
let token_ids = "";
ownedNFTs.result.map((value, index) => {
if(stakedNFTs.indexOf(value.token_id) < 0) {
token_ids += 'token_ids=' + value.token_id + "&";
}
})
nft_unstakeBalance.map((value, index) => {
token_ids += 'token_ids=' + value + "&";
});
if(token_ids == "") {
setBalanceImageUrl([]);
return;
}
console.log("token_ids", token_ids)
let assets = await Axios.get(`${OPENSEA_URL}assets?
order_direction=desc&offset=0&limit=20&${token_ids}asset_contract_address=${G_ADDRESS}`)
.then(res => {
console.log("balanceurl", res);
return res.data.assets;
})
.catch(err => {
console.log(err);
return [];
});
setBalanceImageUrl(assets);
}
I think there should be more convenient way to solve this issue. If you know, feel free to answer or discuss with me.
I think it takes a bit time for opensea to change the owner of NFT asset.
And what's more, I have used both of opensea api and moralis api but it took longer to use opensea api and I couldn't update the frontend images immediately.
I think to force update(add) the images with unstaked images with redux state variable when you unstake like this is the best way. But that is only my opinion.
-in reducer
case "nft_unstakeBalance":
return({
...state,
nft_unstakeBalance : action.payload
})
in frontend
nft_unstakeBalance.map((value, index) => {
token_ids += 'token_ids=' + value + "&";
});
I'm trying to build a movie dashboard (something like Plex); the user selects a folder and all the movies he has in the folder show up. The use of the new File System Access API allows me to create file handlers on the fly and be able to display movies using the browser video player.
The problem I'm facing is with duplicated entries, for instance "Ghostbusters" (can't really understand why, but that's the only one causing the issue)
This is the basic implementation of the file system:
try {
const folderHandle = await window.showDirectoryPicker();
const addedFilms = [];
history.push('/list');
// const entries = await folderHandle.values()
const entries = await folderHandle.values();
for await (const entry of entries) {
const movie = await readMoviesonDisk(folderHandle, entry);
console.log(addedFilms);
if (addedFilms.includes(entry.name)) continue;
addedFilms.push(entry.name);
setMovies((movies) => [...movies, movie]);
}
} catch (error) {
alert('Alert from reading files: ' + error);
}
setMovies just sets a Context with a movies array and readMoviesOnDisk is the following:
const readMoviesonDisk = async (folderHandle, entry) => {
if (entry.kind === 'file' && entry.name.endsWith('.mp4')) {
const path = await folderHandle.resolve(entry);
const handle = await folderHandle.getFileHandle(path);
const movie = await getMovie(entry.name);
if (movie) {
return { ...movie.data, file: handle, name: entry.name };
}
const movieData = await searchMovie(entry.name);
if (movieData) {
const actualData = await getMovieDetails(movieData.id);
if (actualData !== undefined) {
await insertMovie(entry.name, actualData, handle);
} else {
await insertMovie(entry.name, actualData, handle);
}
return { ...actualData, file: handle, name: entry.name };
}
return { name: entry.name, file: handle };
}
};
searchMovie and insertMovie only interact with IndexedDB to store movie info for offline use. getMovieDetails does API calls to TMDB to get movie info.
The key I use for displaying the movies is their TMDB id. Ghostbusters' id is "620".
Can anyone help me?
Without additional background it seems impossible to answer this properly. Can you iterate over all files in the folder and just log the names and kinds? This should work and show no duplicate entries.
const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
console.log(entry.kind, entry.name);
}
I'm in the process of sending multiple files from "React.js" by formData.append() to a backend.
At the backend(Spring boot), I was able to see that multiple files were saved well with postman.
The problem occurred in React.
(I'm using "Ant Design" that is React UI Library.)
Below is the source that append files to formdata with extra data.
const formData = new FormData();
formData.append('webtoonId', this.state.selectedToonId);
formData.append('epiTitle', this.state.epiTitle);
formData.append('eFile', this.state.thumbnail[0].originFileObj);
for( let i = 0; i< this.state.mains.length ; i++){
formData.append('mFiles', this.state.mains[i].originFileObj);
}
uploadEpi(formData)
uploadEpi() is POST API.
Below is about state.
this.state = {
toons: [],
epiTitle :'',
thumbnail : [],
mains : [],
selectedToonID : ''
}
When I submit, Text and single file are stored in the DB normally, but only multiple files cannot be saved.
There was no error. Just multiple files didn't be saved.
The state "mains" is configured as shown below.
I guess it's because I'm using Ant Design incorrectly.
(Ant Design : https://ant.design/components/upload/)
Why I guessed so, because when I add multiple attribute to <Dragger> like below,
<Dragger onChange={this.onChangeMain} beforeUpload={() => false} multiple={true}>
the state "mains" multiple files became undefined.
Below is onChange={this.onChangeMain}
onChangeMain=({ fileList })=> {
this.setState({ mains : fileList }, function(){
console.log(this.state)
});
}
The bottom line is, I want to know how to upload multiple files through <Upload> (or <Dragger>) in "React Ant Design."
I don't know what should I do.
this is my github about this project.
I'd appreciate with your help. thx.
const [loading, setLoading] = useState<boolean>(false);
const [fileList, setFileList] = useState<any[]>([]);
const [/* fileListBase64 */, setFileListBase64] = useState<any[]>([]);
const propsUpload = {
onRemove: (file:any) => {
const index = fileList.indexOf(file);
const newFileList:any = fileList.slice();
newFileList.splice(index, 1);
return setFileList(newFileList)
},
beforeUpload: (file:any) => {
setFileList([...fileList, file]);
return false;
},
onChange(info:any) {
setLoading(true);
const listFiles = info.fileList;
setFileList(listFiles);
const newArrayFiles = listFiles.map((file:any) => file.originFileObj? (file.originFileObj) : file );
const anAsyncFunction = async (item:any) => {
return convertBase64(item)
}
const getData = async () => {
return Promise.all(newArrayFiles.map((item:any) => anAsyncFunction(item)))
}
getData().then(data => {
/* setFileSend(data) */
setFileListBase64(data);
setLoading(false);
// console.log(data);
});
},
directory: true,
fileList: fileList,
};
const convertBase64 = (file:File) => {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file)
fileReader.onload = () => {
resolve(fileReader?.result);
}
fileReader.onerror = (error) => {
reject(error);
}
})
}
const handleDeleteListFiles = () => {
setFileList([]);
setFileListBase64([]);
}
It seems like you are overriding the value of mFiles.
const formData = new FormData();
formData.append('webtoonId', this.state.selectedToonId);
formData.append('epiTitle', this.state.epiTitle);
formData.append('eFile', this.state.thumbnail[0].originFileObj);
let mFiles = [];
for( let i = 0; i< this.state.mains.length ; i++){
mFiles[i] = this.state.mains[i].originFileObj;
}
formData.append('mFiles', mFiles)
uploadEpi(formData)
Maybe this can work: formData.append('mFiles[]', mFiles)
If you add [] to the string it should not overwrite but add to the array
I am grabbing frames from the webcam, converting each image bitmap into a base64 string then passing that to the Google vision API. When i do this i am catching an error but it only logs as true. Im new to react and am struggling to see what i am missing.
grabFrame() {
let mediaStreamTrack = this.state.mediaStream.getVideoTracks()[0];
let imageCapture = new window.ImageCapture(mediaStreamTrack);
return imageCapture.grabFrame();
}
uploadFrame() {
this.grabFrame()
.then(function(bitmapImage) {
var canvas = document.createElement("canvas")
canvas.width = bitmapImage.width;
canvas.height = bitmapImage.height;
let context = canvas.getContext("2d")
context.drawImage(bitmapImage, 0, 0);
let base64Image = canvas.toDataURL("image/png")
const request = new vision.Request({
image: new vision.Image({
base64: base64Image,
}),
features: [ new vision.Feature('FACE_DETECTION') ]
})
vision.annotate(request)
.then((response) => {
console.log(`Response: ${response}`)
})
.catch((error) => {
console.log(`Error: ${error}`) >>>> "Error: true"
});
}).catch((error) => {
console.log('grabFrame() error: ', error)
});
}
In the console, all I can see is POST https://vision.googleapis.com/v1/images:annotate?key=xxxxxxxxxxxxxxxxxxx 400
Logging base64Image gives data:image/png;base64,iVBORw0KGgoAA...
Am I missing something?