i'm trying to implement a custom upload using the #progress/kendo-react-upload component
the upload should insert some metadata in the db morovere uploading the file, so i wouldn't use the saveUrl and removeUrl but to call the server during the adding e removing events
the Upload component has these properties:
<Upload
autoUpload={false}
onRemove={onRemove}
onStatusChange={onStatusChange}
defaultFiles={files}
/>
autoupload=false, because the file shouldn't be uploaded automatically when selected but when the upload button is pressed
in defaultFiles there are previously uploaded files that i want to show in the list (to permit the user to deleted these files from the server eventually, these file are correctly identified into the event onRemove)
const onRemove = (event: any) => {
const fileToRemove = event.affectedFiles;
//...call the server to remove (removing the file and its metadata in the db)
};
new selected files are correctly listed in the:
const onStatusChange = (event: UploadOnStatusChangeEvent) => {
const readyToUpload = event.affectedFiles.filter(
(item: UploadFileInfo) => item.status == UploadFileStatus.Uploading
);
//...call the server to upload the file and add some metadata into a databae
};
how to prevent that saveUrl and removeUrl are automatically invoked when thes files are added or removed from the component and to manage the upload in the corresponding events
Related
hi there so i have a link lets say it is https://example.com/exp
the exp page is my add page and it is cached in my service worker and works offline
now when i open my list and choose to edit a record it opens in https://example.com/exp?id=2
when i open this page it doesn't work offline if i remove the id part then it works but then it is an add i want my edit page to be offline as-well
how do i fix this?
please help
my code**
// give your cache a name
const cacheName = 'my-cache';
// alert('hi')
// put the static assets and routes you want to cache here
const filesToCache = [
'/',
'https://example.com/exp',
];
// the event handler for the activate event
self.addEventListener('activate', e => self.clients.claim());
// the event handler for the install event
// typically used to cache assets
self.addEventListener('install', e => {
e.waitUntil(
caches.open(cacheName)
.then(cache => cache.addAll(filesToCache))
);
});
// the fetch event handler, to intercept requests and serve all
// static assets from the cache
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request)
.then(response => response ? response : fetch(e.request))
)
});
okay so cache and serviceworkers
website can only work offline with the exact link. Change it a bit and it brakes
you have to cache the id if you want to cache a edit view
you have to also use something like Dexie/indexedDB for an offline data/storage handler
and then based on your data you fetch you have to for loop the ids and stringify them with your url and then add them - i have the code to show how it works
if anyone wants it
I have to send an email, with kendo ui grid data as attachment. If I use excel export the I am not able to auto save the file in project folder at particular location. I am not able to customize the saveAsExcel() method.
So I don't want to save that file in the local folder. Is there any way to do this?
I am not able to auto download the file to specific folder in project. Every time it is asking to save at particular location.
I am trying to auto save the file to specific folder in project and try to attach that file in email.
I am not getting any data in excel while saving grid. Also I want to avoid the save as popup for saving the file.
var grid = $("#MyReport").data("kendoGrid");
var trs = $("#MyReport").find('tr');
var rows = [];
for (var i = 0; i < trs.length; i++) {
var dataItem = grid.dataItem(trs[i]);
rows.push({
cells: [
dataItem
]
})
}
var workbook = new kendo.ooxml.Workbook({
sheets: [
{ title: "EmployeeInfo",
rows: rows
}
]
});
kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: "EmployeeInfo.xlsx" });
}
You are on wrong track. In real case scenario, your project should be on server. When a user clicks export on your grid it will be prompted to save on his local computer not in your project on server. Kendo export is client-side export. You need to export on the server-side, save the file on the server and attache it when sending mail through your project.
Steps to take:
On export button click send params page_size and page
On server-side with that params get data from a database
On server-side with data from a database create a file (excel)
On server-side via mail client attache created file and send it
I am currently using Vue js and trying to dynamically bind images that I'm getting from my database. I'm getting my path but the images aren't showing up. My front end is on localhost:8080 and my back end on localhost:3000.
In my app.js file, I'm establishing the the public folder as the static directory,
inside that folder I have my uploads directory which is where my images are being sent to.
app.use(express.static(path.join(__dirname, 'public')))
I'm sending my images there through multer:
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './public')
},
filename: function (req, file, cb) {
cb(null, new Date().toISOString() + file.originalname)
}
})
This is an example of how I'm seeing the image's source code popping up on the inspector.
src="public/uploads/2020-03-27T12:16:43.535Zaaa.jpeg"
I want to be able to display them dynamically in my components, but the images aren't showing up.
I'm also using Vuex and storing them in an object inside my states.
I think you should access your image using the full address
src="http://localhost:3000/uploads/2020-03-27T12:16:43.535Zaaa.jpeg"
I've managed to upload images through drag & drop to a SP 2013 library by intercepting the paste and fileUploadrequest events (+ added mandatory headers and used /_api/web/getfolderbyserverrelativeurl(\'/sites/theSite/theLibrary\')/files/add(overwrite=true,%20url=\'aDynamicFilename.jpg\') as the request's URL).
The problem with this approach is that even if the image is uploaded, the image is not inserted in the editor (no error). I'm not setting config.uploadUrl for this approach.
Q#1: Is there any step which I should go through after the image is uploaded? Like telling the CKEDITOR instance to insert the image?
Later on, I've noticed that if I'm setting the config.uploadUrl to the same URL as I'm using above, the editor inserts successfully the image. The problem is that, from my trials, the config.uploadUrl is initialized together with the CKEDITOR instance (therefore, can't be assigned dynamically for each image, in case that multiple images are dragged and dropped on the editor).
Q#2: Is there another way to configure the uploadUrl or maybe some other config property that would allow the custom upload to work and insert the image in the editor?
Eventually made it work by following a similar approach as the on in this repo:
RyanSiu1995/ckeditor-ImageUploader
Use a FileReader and start loading the image when it's pasted to the
CKEditor
On the fileReader's onload event, create a img element in the
editor's document object with some opacity and with the fileReader's
Base64 string as the src
On the fileLoader's uploaded event, remove
the img and re-add it with the actual file's url (changing the src
attribute on the img was not triggering the editor's change event, which I was hooking into,so I chose to replace the whole element)
Here's the relevant section from the ckeditor-ImageUploader plugin:
fileDialog.on('change', function (e) {
var fileTools = CKEDITOR.fileTools,
uploadUrl = fileTools.getUploadUrl( editor.config, 'image' ),
file = e.target.files[0],
loader = editor.uploadRepository.create(file),
reader = new FileReader(),
notification,
img;
// verify
if (!/image/i.test(file.type)) {
notification = editor.showNotification( 'Please check the correct format.', 'warning' );
setTimeout(function() {
notification.hide()
}, 2000);
return false
}
loader.upload(uploadUrl);
// preview image
reader.readAsDataURL(e.target.files[0]);
reader.onload = function (e) {
img = editor.document.createElement('img');
img.setAttribute('src', e.target.result);
img.setStyle('opacity', 0.3);
editor.insertElement(img);
}
loader.on('uploaded', function(evt) {
editor.widgets.initOn(img, 'image', {
src: evt.sender.url
});
img.setAttribute('src', evt.sender.url);
img.setStyle('opacity', 1);
});
loader.on('error', function() {
img.$ && img.$.remove();
});
fileTools.bindNotifications(editor, loader);
// empty input
fileDialog[0].value = "";
I'm building a web app with AngularJS that will allow users to upload their own images. Right now all of my data is text based, so I am storing the text based data in Firebase. As far as I know, Firebase can't store images. What I want to do is store the user generated images somewhere simple (I'm thinking Amazon S3 or even Dropbox) and then reference the images via unique URLs, which I would store as text in Firebase.
My questions:
Does this seem like a valid approach?
Any recommended services for hosting the images?
How to upload an image to the hosting service and get the image's unique URL?
Right now I am allowing users to upload images on the front end with the following code, just not sure what to do with the images once I have them. Would appreciate any help, I'm very new to this!
HTML
<output id="list"></output>
<input type="file" id="files" name="files[]" class="button" multiple />
Upload Pictures</i>
Angular Controller
$scope.getImages = function(){
$("input[type='file']").trigger('click');
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
console.log(f);
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
You could use a service like Cloudinary to host images uploaded by your users. There are Angular directives that making using the service pretty easy. You will need a small server-side component to encrypt the upload parameters.
Look into Zapier integration with S3. The idea is that you setup a queue collection in firebase where you would create a new instance with the binary of the file data. Then zapier listens to for child_added on this queue collection and does it's magic (that you don't have to worry about) to upload your file to S3 bucket. After everything is finished, the instance in the queue is deleted... No server side needed with that, except there might be some fees...
Here is the link https://zapier.com/zapbook/amazon-s3/