how to load local .json file?

[hongxingli]

I can load it through URL, but when I try to change the index.html to local json, it doesn't work, any idea how I can debug further?

BTW, I use swagger-maven-plugin to generate the json, so there are multiple json files: service.json, users.json....

 .....
  window.swaggerUi = new SwaggerUi({
    spec: "file://work/swagger-maven-example/generated/swagger-ui/service.json",
    dom_id: "swagger-ui-container",
  .....

[webron]

The easiest way would probably be to embed the json inside your index.html.

Check out the spec parameter - https://github.com/swagger-api/swagger-ui#parameters.

[ramsunvtech]

@hongxingli, You can use Relative path even i tried and it works !

Example:
Same Directory: ../file.json

[webron]

Closing for now. Reopen if needed.

[rukiliii]

@hongxingli: Could you please provide your snippet and how you defined the path?

Thanks,
Ruki

[hongxingli]

Thanks Ruki,

We don't need this feature any more, at that time, I was thinking to have swagger UI pointed to a local swagger.json file.

[bandtank]

@rukiliii Did you ever figure this out? I'm trying to use a relative path and it doesn't seem to work. swagger-ui.js looks like it's checking the url string for "http" and mine won't have that because the path is "json/swagger.json". Nothing I've tried has made swagger-ui happy.

[bigbutter]

On the same topic but for node.js, this works for me:

var swagger = require("swagger-client");
var fs = require('fs');
var path = 'some path relative to process.cwd()'

var client = new swagger({
spec : JSON.parse(fs.readFileSync(path, 'utf8')),
...
});

As someone pointed to above, don't provide a URL, it is ignored when 'spec' is provided.

[mm-gmbd]

@bandtank, I'm with you. @rukiliii , a solution to this is still needed - please reopen as none of the suggestions here work (or explain in great enough detail).

An easier solution that didn't have to be googled would be nice. I've added api.json to the dist folder and when I simply put api.json and click "Explore", I get the following error:

Please specify the protocol for file:///C:/Users/.../swagger-ui/dist/index.html/api.json

Not sure why it's adding "index.html" like it's part of the path, but I'd presume that's at least part of the problem.

EDIT:

Here was my interim solution:

1. With Node, globally install package http-server npm install -g http-server
2. Change directories to the folder where your api.json is hosted, and run the command http-server --cors (CORS has to be enabled for this to work)
3. Open swagger ui (i.e. dist/index.html)
4. Type http://localhost:8080/api.json in input field and click "Explore"

[vincent-zurczak]

It is not possible to load file:/ URLs directly.
This is because of same origin policy. You will get a access to restricted uri denied. At least, it is the message in Firefox. Unfortunately, it is necessary to use a (local) web server to test a file with swagger-ui. Or people can try to update the security settings of their browser. No matter what, this is quite annoying for people that discover Swagger and want to test generated outputs with a local file.

Anyway, providing a swagger-ui where users can directly upload their JSon file for preview would be dangerous (or at least complicated) in terms of security.

As mentioned above, embedding the json directly in the index.html file is probably the most simple workaround.

[hongxingli]

Thanks @vincent-zurczak , that makes sense, please help close this issue.

[ndsurendra]

@ramsunvtech, Do you remember for which version this is working for you. It doesn't seem to work for me for the version 2.1.4

@vincent-zurczak, I'm trying to understand why it will be a security issue to allow uploading json files. Could you elaborate a little?

I feel it is a good use-case to take care of the file:/// protocol as well.

[vincent-zurczak]

Uploading JSon files means having a server configuration. Which is not the intent of Swagger UI, which is basically only a client application (at least, from what I understood).

But maybe what we want is not real uploading.
We could upload a local JSon file to the local storage. This way, it would by-pass the same origin policy issue. See http://stackoverflow.com/questions/29558959/loading-a-json-file-into-localstorage

1. Select the JSon file.
2. Save it in the local storage.
   Use the same storage key, so that we cannot feed it with hundreds of Json files.
3. Load the JSon from the local storage.

[mit2nil]

Hi,

I am new to web programming. Can someone help me what I am doing wrong? I just cloned swagger UI source from https://github.com/swagger-api/swagger-ui and inside "dist", I put my local swagger.json file which I created using swagger.io editor.

I added below three line of code separately and opened index.html in the browser (Chrome/Edge/Firefox) and none of them seems to be working.

1. spec:"file:///C:/Git/swagger-ui/dist/swagger.json"
2. spec: "file:///swagger.json"
3. spec: "swagger.json"

I don't have npm or anything fancy installed. I am working on a Python flask back end and ultimately I want to hook this onto my server. I also tried using connexion with my flask backend but I am not able to use flask-restful with connexion (issue in both python 2 and 3) and I can't find solution for that.

[ndsurendra]

Hi Nilay,

I don't know how to integrate swagger with flask, but regarding your
initial query, these changes to index.html worked for me.

Add your swagger.json contents directly to a variable

var spec = (like var spec =
{.....})

Then add the spec variable to the SwaggerUi constructor (1 line change)

...
window.swaggerUi = new SwaggerUi({
* spec: spec,*
url: url,
dom_id: "swagger-ui-container",
supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
...

Then, open your index.html in a browser.

On Thu, Apr 28, 2016 at 6:59 AM, Nilay Chheda notifications@github.com
wrote:

Hi,

I am new to web programming. Can someone help me what I am doing wrong? I
just cloned swagger UI source from
https://github.com/swagger-api/swagger-ui and inside "dist", I put my
local swagger.json file which I created using swagger.io editor.

I added below three line of code separately and opened index.html in the
browser (Chrome/Edge/Firefox) and none of them seems to be working.

1. spec:"file:///C:/Git/swagger-ui/dist/swagger.json"
2. spec: "file:///swagger.json"
3. spec: "swagger.json"

I don't have npm or anything fancy installed. I am working on a Python
flask back end and ultimately I want to hook this onto my server. I also
tried using connexion with my flask backend but I am not able to use
flask-restful with connexion (issue in both python 2 and 3) and I can't
find solution for that.

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#1110 (comment)

[mit2nil]

Thanks @ndsurendra after manually adding json content it is working fine.

[AkashMalhotra]

@ndsurendra Hey thanks for the solution. What if I have more than 1 json file. Do I have to manually copy/paste the content into a new variable? If so, how do I make it so that in the index.html page, there are 2 options ( option 1, option2) and based on the click, I load the swagger-ui. I tried putting the var spec for my first json file, and then var spec2 ( my 2nd json file) like this:

url: url,
spec: spec,
spec2:spec2

how do I call them sepertely based on a click

[webron]

@AkashMalhotra you can't load multiple jsons into a single SwaggerUi instance. Take a look at https://gist.github.com/webron/7c41db7f777471fcbc10.

[AkashMalhotra]

@webron WHere do I define the url under uiswagger2? Do I just do url:path/example2.json?
Because I manually copypasted the first json to the spec variable. I'm trying to use 2 different jsons statically. So those jsons files are in that dist folder. Still confused on how to upload the 2 different jsons

[webron]

The parameter passed to it has the same value, but as long as you set url to a different URL, you should be good.

[AkashMalhotra]

I'm trying to basically add a button on the side that would link to the 1st json file, another button to another json file etc. What href do i add or how do I redirect a click so that it loads the different urls. https://gist.github.com/anonymous/3f37edf7ea2c2c1304473a7ac10a2b82

[ayushidalmia]

Is there any other way to load the local json file other than copy pasting the entire json in the spec?

[mm-gmbd]

@ayushidalmia - Right now there's no very straightforward way to accomplish this, but this Stackoverflow answer will make it easier than the copy paste.

[reverofevil]

It could've been solved with a simple file selector widget. I had this problem since ~2013 and totally didn't expect this issue not to be fixed.

[mm-gmbd]

@polkovnikov-ph - agreed, it feels criminal that it's not that simple!

[umairali89]

Hi
i'm getting this error, basically i'm trying to include swagger-client in my angular JS project.

Uncaught Error: Module name "swagger-client" has not been loaded yet for context: _. Use require([])

var swagger = require('swagger-client'); //require is not working in angular JS project.

var myApp = angular.module('myApp', ['swagger-client']) //then trying to get swagger-client

[matthewadams]

FYI, this may be relevant: swagger-api/swagger-js#1292

[llxcyzgh]

Hi Nilay,

I don't know how to integrate swagger with flask, but regarding your
initial query, these changes to index.html worked for me.

Add your swagger.json contents directly to a variable

var spec = (like var spec = {.....})

Then add the spec variable to the SwaggerUi constructor (1 line change)

...
window.swaggerUi = new SwaggerUi({

• spec: spec,*
  url: url,
  dom_id: "swagger-ui-container",
  supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
  ...

Then, open your index.html in a browser.

On Thu, Apr 28, 2016 at 6:59 AM, Nilay Chheda notifications@github.com
wrote:

Hi,
I am new to web programming. Can someone help me what I am doing wrong? I
just cloned swagger UI source from
https://github.com/swagger-api/swagger-ui and inside "dist", I put my
local swagger.json file which I created using swagger.io editor.
I added below three line of code separately and opened index.html in the
browser (Chrome/Edge/Firefox) and none of them seems to be working.

1. spec:"file:///C:/Git/swagger-ui/dist/swagger.json"
2. spec: "file:///swagger.json"
3. spec: "swagger.json"

I don't have npm or anything fancy installed. I am working on a Python
flask back end and ultimately I want to hook this onto my server. I also
tried using connexion with my flask backend but I am not able to use
flask-restful with connexion (issue in both python 2 and 3) and I can't
find solution for that.
—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#1110 (comment)

[shockey]

Locking, as this is very old and resolved.

Please open a new issue if you have something to add!