I am working on the d3.js project in which I need to load json, tsv and csv files. I want to upload all the files on jsfiddle. In jsfiddle you have sections for html, css and javascript. But I am not sure how to load external json, csv and tsv file so that my D3 map can read it. I tried using [How to add local json file in jsfiddle? but I am getting error as:
"jquery-1.11.0.js:9666 XMLHttpRequest cannot load https://www.dropbox.com/s/n4anyoro797w2kq/test.json?dl=0. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access. The response had HTTP status code 405."
Where I am getting wrong? Any other approach for this?
Related
I'm working on a back-end feature that involves processing CSV files uploaded by users. Most tutorials I've found so far suggest that I should read that CSV file through a multipart request.
https://www.appcoda.com/restful-api-tutorial-how-to-upload-files-to-server/
How does HTTP file upload work?
However, as far as I know, multipart requests involve a boundary and only make sense when we need to send different kinds of payload over the same request. For CSV file uploading, all I need is to send a byte stream over the request body (with the appropriate text/csv content type).
I'm not sure if there is any specific reason that people use and suggest multipart requests for uploading files?
if you use text/csv your request body should be raw text (like with json) like
"1,2,3
4,5,6"
But if you want upload file, content-type should say about it.
so, in that case i recomend to use multipart/form-data when uploading any type of files
I built an api with next.js.
I use a JSON file as a data source. I import it as a module. But if the content of the JSON changes, it still shows the first content, the same, when i started the server.
Is there a way to avoid caching JSON with import?
I need to get the JSON content, but also the updates in the JSON file, without restarting my api.
If your Server returns the JSON files with a specific File-Extension like .json you could try to turn off the caching for those file-types:
Here is an example for ngnix-servers
Here is an example for apache-servers
Another possibility is to load the JSON via Javascript where you add some random parameter to the Query-Params of the URL
Here is the Example
i want to handle a requirement in polymer webcomponents where user can upload csv file from ui and csv file can be parsed to json and sent to server ,i searched and found for vaadin upload,looked over the api but i am not sure how to receive the csv file and convert to json and sent to server,can anyone show a jsfiddle of vaadin upload or any other web component to handle this scenario?
First of all, I am wondering why you would not simply do the conversion on the server side.
In this case, you would be able to use the vaadin-upload directly indeed.
Here is a snippet that would upload all files to the example.com server, and only allow CSV files.
<vaadin-upload target="https://example.com/upload" method="POST" accept="text/csv">
</vaadin-upload>
There are plenty of resources on how to convert CSV files to JSON.
Here is a snippet
And here is a node library
If you really wanted to do the conversion client side, then I would suggest to create an element that would embed a vaadin-upload, and convert the Files array to Json before manually calling the uploadFiles method.
I'm working on functional testing of a REST API using Jmeter and JSON. I've got file uploading working but I cant seem to get the file downloading to work in jmeter. I'm saving the response as noted in this post: JMeter - File upload and file download scenario
When I do this, I am getting close but not quite exactly what I need. This is and example of what I am getting:
--0rVAdzesdQq7VrwJaRoYGm_UHdMD5nhi9_5w4u
Content-Disposition: form-data; name="api-test"; filename="LIBFILE1.txt"
Content-Type: text/plain
Content-Transfer-Encoding: binary
Library File for Automated Smoke Test
This file is used to test file library upload for automated smoke tests.
--0rVAdzesdQq7VrwJaRoYGm_UHdMD5nhi9_5w4u--
How can I get the download to only save the file contents? In this example, it should only be:
Library File for Automated Smoke Test
This file is used to test file library upload for automated smoke tests.
This is a simple textfile. I would also like to download the other formats that I'm uploading including jpg, png, docx, pdf but it wont be right if it has this extra data coming with it. I figure once I get a simple text file working, it will help me get the more difficult file types.
Well, Save Responses to a file listener will store the data you can observe in the "Response Data" tab of the View Results Tree listener. If you see these Content-Type, Content-Disposition, etc. headers as response data - most probably your upload wasn't successful as you should not be getting the headers this way.
I would recommend double checking that the same request being executed via browser or i.e. Postman tool returns the same response and fix your JMeter script in case of differences.
See Performance Testing: Upload and Download Scenarios with Apache JMeter article for details on how to properly mimic file operations with JMeter.
Alternative way of saving response data into a file is using JSR223 Listener, given you select "groovy" in the language dropdown you should be able to save the response using the following simple script:
new File("/path/to/your/file.txt").setBytes(prev.getResponseData())
I am trying to recreate this d3 example in JSBIN
d3.csv("bar-data.csv", function(error, data) {
...
})
I am trying to reference the csv file but it does seem to be able to access the csv file:
d3.csv("http://bl.ocks.org/d3noob/raw/8952219/d45ad0a7caf9c499d1a1e975b3760c90f5321072/bar-data.csv", function(error, data) {
...
I have tried uploading the file to dropbox and using that link but that alos does not work.
Can anyone advise how I can get these urls to the csv file to work. or offer another way for me to try and recreate this example? The reason I want to recreate it is so I can modify and test it with other data and just generally do more with it....
NOTE Another option is to try jsfiddle, which I will, but I would like to use jsbin.
EDIT1
here is the JSFIDDLE using the dropbox link to the csv file. this is the error I get in firefox:
https://www.dropbox.com/s/plpl0yjxze9elpd/bar-data.csv 200 OK 966ms d3.v3.min.js (line 1)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.dropbox.com/s/plpl0yjxze9elpd/bar-data.csv. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
TypeError: data is undefined
EDIT2
One way is to not read in from the csv at all and have it in an array already , which takes a while to get it to the format I want, but I would still like to be able to get it to work by reading in the csv file.
data = [{"date":"2013-01","value":53},{"date":"2013-02","value":165},{"date":"2013-03","value":269},{"date":"2013-04","value":344},{"date":"2013-05","value":376},{"date":"2013-06","value":410},{"date":"2013-07","value":421},{"date":"2013-08","value":405},{"date":"2013-09","value":376},{"date":"2013-10","value":359},{"date":"2013-11","value":392},{"date":"2013-12","value":433},{"date":"2014-01","value":455},{"date":"2014-02","value":478}]
FIDDLE
JSBIN
It's going to be hard to find somewhere to drop that file that won't hit you with CORS restrictions. The easiest thing to do would just be to download the code and run it locally from a file.
If you really want to do it all in the browser, Plunker would be a good choice. It's similar to jsfiddle or jsbin, but allows you to create any type of file you want in your project. So just create a csv file there and paste the data in.