Wonderful.
Best posts made by pazarbasifatih
-
RE: Integrating thrid party component
@metalsadman I tried creating a boot file manualy at first because this library’s name starts with
@growthbunker/vueflags
VScode created a folder with @growthbunker and vueflags.js file. And Adding the code above didn’t work. Now that I’ve read the whole thing aboutquasar new boot <name>
I’ll try it next time when I need to plugin a library. Thank you very much.@tlloyduk
I found vue-country-flag package and added the library to the boot array in the config
because I didn’t know how to create a new boot file a few hours ago.
Importing the library to the component that I was going to use simply worked. Thank you for your reply. It certainly gave me clues about how I can import libraries.I’ve been working on this one since yesterday. It’ll be complete today I hope. @metalsadman Thanks again for helping me with the q-select.
-
RE: Stripe integration with quasar q-field
It will be very helpful to me, once I deal with every other issue in the backend
Thanks a lot. This will be my first time implementing stripe. I’ll write about the news. -
RE: Q-Uploader with Composition API
@metalsadman Actually, I don’t assume myself knowing anything. I look at the documentation and try to find my way. My eyes simply couldn’t pick up anything about the fact that refs could be referred by xyz.value, on neither vue3 documentation nor the quasar’s. I’m a novice with some JS knowledge. Bare with me, please.
And thank you. Of course I didn’t know that. Now I’ll try that
Latest posts made by pazarbasifatih
-
RE: PurgeCSS
@hawkeye64 I’ve read quite a lot of instances where Quasar CSS led people to other frameworks… Just so that you know
-
RE: Sortable in tabs
@dobbel Sortable as in Sortable.js, I think.
An example would be like this:
https://sortablejs.github.io/vue.draggable.next/#/table-example -
RE: Q-Uploader with Composition API
@metalsadman Actually, I don’t assume myself knowing anything. I look at the documentation and try to find my way. My eyes simply couldn’t pick up anything about the fact that refs could be referred by xyz.value, on neither vue3 documentation nor the quasar’s. I’m a novice with some JS knowledge. Bare with me, please.
And thank you. Of course I didn’t know that. Now I’ll try that
-
RE: Q-Uploader with Composition API
Anyway, I tried the putting scope.reset() in the queuedFiles list template, (as it seems like only place to access the prescribed reset(). function is through scope in the documentation)
It resets the whole thing… So I needed use the event @finish event but it didn’t fit any place I’ve inserted so far. I probably don’t understand this component at all. Why is it so hard? I am doing guess work here.
This is the Codepen I’ve tried doing it. -
RE: Q-Uploader with Composition API
@dobbel said in Q-Uploader with Composition API:
this.$refs[myRefToQUploader].reset()
Thank you, but
this
doesnt make sense in composition api. -
RE: Q-Uploader with Composition API
@rstoenescu Great! I tried running
reset()
method in the MyUploader.js but I am probably doing something wrong because, it’s giving meReferenceError: reset is not defined at eval
error.So I tried creating my own
function reset()
inside the MyUploader.js but it has the infamous uploadSize.value in the original example, which is not inside const state, so I can’t use the helpers object for reaching it.function reset () { if (props.disable === false) { state.abort() state.uploadedSize.value = 0 uploadSize.value = 0 revokeImgURLs() state.files.value = [] state.queuedFiles.value = [] state.uploadedFiles.value = [] } }
I’m sure there must be a proper way of calling that function but I lack the knowledge.
Sorry to bother for this, but I’ve got kind of obsessed with it now. Wouldn’t putting uploadSize inside the
const state = {uploadSize: ref(0)}
in the uploader-core be a little bit more flexible? -
RE: Q-Uploader with Composition API
@metalsadman Great! Thank you for point that out.
Now let’s me see how I can fix the uploadSizeLabel issue.
Uploading (A feature to block parallel uploading would be great)
Uploaded
Remove File (See thatremoveFile()
does not recalculate the uploadSizeLabel because I can’t reach uploadSize from helpers. It should be configured via a PR in uploader-core.js)
And this problem leads to the following, when all files are removed.
And if you add a file, it keeps adding to the old uploadSize.
2.8 MB + 400 KB = 3.2 MB // true but this is not the behavior you’d expect to see.
When done with uploading, the label is a complete(!) mess
-
RE: Q-Uploader with Composition API
I have converted github/birchb 's wonderful q-uploader firebase implementation into the composition api using this files above. And it’s uploading, updating the progess and removing the file on demand. It has 2 minor issues with emitting the ‘uploaded’ event and calculating the blue uploadSize label on top of the component when the item is removed. But I’m sure they’re solvable problems. So the code is…
import { createUploaderComponent } from "quasar"; import { computed, ref } from "vue"; import firebase from "firebase/app"; // export a Vue component export default createUploaderComponent({ // defining the QUploader plugin here name: "MyUploader", // your component's name props: { pathPrefix: { type: String, default: "", }, }, emits: ["uploaded", "failed", "removed"], injectPlugin({ props, emit, helpers }) { // can call any other composables here // as this function will run in the component's setup() const storage = ref(firebase.storage().ref()); const activeTasks = ref([]); // [ REQUIRED! ] // We're working on uploading files const isUploading = computed(() => { // return <Boolean> }); // [ optional ] // Shows overlay on top of the // uploader signaling it's waiting // on something (blocks all controls) const isBusy = computed(() => { // return <Boolean> }); // [ REQUIRED! ] // Abort and clean up any process // that is in progress function abort() { // ... } // [ REQUIRED! ] // Start the uploading process function upload() { if (props.disable || !helpers.queuedFiles.value.length) { return; } helpers.queuedFiles.value.forEach(async (file) => { await __uploadSingleFile(file); }); } function __uploadSingleFile(file) { let pathPrefix = props.pathPrefix || ""; // const fileRef = storage.value.child(pathPrefix + file.name) const fileRef = storage.value.child(`${pathPrefix}/${file.name}`); helpers.updateFileStatus(file, "uploading", 0); const uploadTask = fileRef.put(file); activeTasks.value.push(uploadTask); // Listen for state changes, errors, and completion of the upload. uploadTask.on( firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed' (snapshot) => { // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded if (file.__status !== "failed") { const loaded = Math.min( snapshot.totalBytes, snapshot.bytesTransferred ); helpers.uploadedSize.value += loaded - file.__uploaded; helpers.updateFileStatus(file, "uploading", loaded); } }, (error) => { // A full list of error codes is available at // https://firebase.google.com/docs/storage/web/handle-errors helpers.queuedFiles.value.push(file); helpers.updateFileStatus(file, "failed"); emit("failed", { file, error }); helpers.uploadedSize.value -= file.__uploaded; activeTasks.value = activeTasks.value.filter((t) => t !== uploadTask); }, () => { // Upload completed successfully, now we can get the download URL uploadTask.snapshot.ref .getDownloadURL() .then((downloadURL) => { const fullPath = uploadTask.snapshot.ref.fullPath; const fileName = uploadTask.snapshot.ref.name; helpers.uploadedFiles.value.push(file); helpers.updateFileStatus(file, "uploaded"); let uploadTime = _.round(new Date().getTime() / 1000); console.log("TCL: __uploadSingleFile -> uploadTime", uploadTime); let [fileSize, fileType] = [file.size, file.type]; console.log( downloadURL, fileName, fileSize, fileType, fullPath, uploadTime ); emit("uploaded", { downloadURL, fileName, fileSize, fileType, fullPath, uploadTime, }); helpers.uploadedSize.value += file.size - file.__uploaded; // helpers.uploadedSize.value = 0; }) .catch((error) => { emit("failed", { file, error }); }); activeTasks.value = activeTasks.value.filter((t) => t !== uploadTask); } ); } function removeFile(file) { if (props.disable) { return; } if (file.__status === "uploaded") { helpers.uploadedFiles.value = helpers.uploadedFiles.value.filter( (f) => f.name !== file.name ); // As of Quasar v2 beta7 uploadSize cannot be taken out of helpers/state. So removeFile won't be able to change blue header the label on top. helpers.uploadSize.value -= file.__uploaded; } else if (file.__status === "uploading") { file.__abort(); } else { helper.uploadSize.value -= file.size; } helpers.files.value = helpers.files.value.filter((f) => { if (f.name !== file.name) { return true; } f._img !== void 0 && window.URL.revokeObjectURL(f._img.src); return false; }); helpers.queuedFiles.value = helpers.queuedFiles.value.filter( (f) => f.name !== file.name ); emit("removed", [file]); } return { isUploading, isBusy, abort, upload, }; }, });
It gives the following warningBut it’s a fully functional Firebase Uploader for Quasar v2 now.[Vue warn]: Component emitted event "uploaded" but it is neither declared in the emits option nor as an "onUploaded" prop.
I don’t know why.Edit: emits: [“uploaded”, “failed”, “removed”],
-
RE: Q-Uploader with Composition API
I made a discovery today. I will be working on it over the next days. It’s the uploader-core which exposes all the functions and references. So I can begin working with the createUploaderComponent Hurray.
Edit: Ok ok this thing goes deeper than I’ve expected. There’s this xhr-uploader-plugin which exposes how things are running. I’ve finally found how the heck the queuedFiles can be called in the createUploaderComponent:
helpers.queuedFiles.value
. So I’ll keep running my expedition from there. -
RE: A working QFirebaseUploader component
this is not properly working, sorry. the computed properties are blocking the process. The uploaded chunks are not reflected as percentages. Pfff.